jQuery Scrollable Div for Mobile Websites

I'm trying to create a jQuery plugin for a mobile website that turns a div container into a scrollable container. I accomplish this by wrapping all the children that are inside the div container in another div container thats absolutely positioned. Then I modify the top or left css styles of the inside div to simulate moving the text up and down or left and right. I'm using touch event listeners to determine when to move the scrolling div.

However, I'm having some trouble setting the width() of my inside scrolling div. Here's a sample of the code:

myObj.ready(function(){
myObj.css({ 'position' : 'relative', 'overflow' : 'hidden' }).wrapInner('<div id="scrollCntr">');
$('#scrollCntr').prepend("<img src='scrollBar.png' id='scrollBar' class='horizontal'");
$('#scrollCntr').height( myObj.height() );

if ( config.width <= 0 ) {
    $('#scrollCntr').children().each(function(){
        if ( $(this).css('display') == 'inline' || $(this).css('float') == 'left' || $(this).css('float') == 'right' ) {
            totalWidth += $(this).width();

            for( var i = 0; i < boxProps.length; i++ )
                if ( $(this).css(boxProps[i]) != "" )
                    totalWidth += parseInt( $(this).css(boxProps[i]).replace( /px/i, '' ).replace( /em/i, '' ).replace( /pt/i, '' ) );
        }
    });
} else {
    totalWidth = config.width;
}

console.log( totalWidth );
$('#scrollCntr').width( totalWidth );
console.log( $('#scrollCntr').width() );

});

In this case, config.width is set to 719 and myObj is the container div being scrolled. I'm not really sure what the problem is. I didn't have any problems with this in my demo, when my children elements where just images, but when I applied it to my mobile website, where the children elements where div boxes, its been having problems. Perhaps the children elements aren't being loaded in time? But that wouldn't explain why I can't set the scrolling div's width. Its definately being loaded. I have no idea what the problem is...

---

Got it. Found it on another question:

jQuery event to trigger action when a div is made visible

链接地址: http://www.djcxy.com/p/83396.html

上一篇: 滚动到特定的div或id后触发事件

下一篇: 用于移动网站的jQuery可滚动Div