繁体   English   中英

移动网站的jQuery Scrollable Div

[英]jQuery Scrollable Div for Mobile Websites

我正在尝试为移动网站创建一个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的宽度。 它肯定是被加载。 我不知道问题是什么...

得到它了。 在另一个问题上找到它:

使div可见时的jQuery事件触发动作

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM