簡體   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