适用于移动网站的 jQuery 可滚动 Div

Question

我正在尝试为移动网站创建一个 jQuery 插件，将 div 容器变成可滚动容器。我通过将 div 容器内的所有子级包装在另一个绝对定位的 div 容器中来实现此目的。然后我修改内部 div 的顶部或左侧 css 样式以模拟上下或左右移动文本。我使用触摸事件侦听器来确定何时移动滚动 div。

但是，我在设置内部滚动 div 的 width() 时遇到一些问题。这是代码示例：

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() );

});

在本例中，config.width 设置为 719，myObj 是正在滚动的容器 div。我不太确定问题是什么。在我的演示中，当我的子元素只是图像时，我没有遇到任何问题，但是当我将其应用到我的移动网站时，其中子元素是 div 框，它就出现了问题。也许子元素没有及时加载？但这并不能解释为什么我无法设置滚动 div 的宽度。它肯定正在加载。我不知道问题是什么......

Answer 1

知道了。在另一个问题上找到了它：

要触发的 jQuery 事件当 div 可见时执行的操作