用iscrollview jquerymobile插件獲取滾動條的位置？

的HTML：用iscrollview jquerymobile插件獲取滾動條的位置？

<div data-role="page" id="index"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h1 class="header">Index page</h1> 
    </div> 

    <div data-role="content"> 
     <div class="example-wrapper" data-iscroll> 
      <ul data-role="listview"> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li> 
       <li><a href="#">Some link</a></li>     
       </ul> 
     </div>   
    </div> 

    <div data-theme="b" data-role="footer"> 
     <h1><a href="#" class="top">Footer</a></h1> 
    </div>  
</div>

以下是移動滾動條的JavaScript。但我想找回滾動條的位置已經移動後：

$(document).on('click','a.top',function(){ 
    $(".example-wrapper").iscrollview("scrollTo", 0, 100, 200, true); 
    console.log($('.iscroll-wrapper').iscrollview('option','y')); 
});

結帳這個fiddle。

來源

2014-02-21 Varun Nath

iScrollview將div中的內容封裝在.iscroll-scroller div中，並使用transform()來滾動該div。您需要檢索transform上述div的CSS屬性。

$(".iscroll-scroller").css("transform");

上面將返回matrix(1, 0, 0, 1, x, y)，並y攜帶的垂直值變換/平移。然後您需要.split(" ")矩陣並將其轉換爲陣列以便能夠讀取它。

var matrix = $(".iscroll-scroller").css("transform").split(" ");

的陣列將看起來像這樣

["matrix(1,", "0,", "0,", "1,", "0,", "-100)"]

然後在陣列，（matrix.length - 1最後值=指數）只是parseInt(string, radix)最後一個值。

var posY = parseInt(matrix[matrix.length - 1], 10);

Demo^（1）

^（1）setTimeout()在演示用於延遲動畫完成後，檢索posY（變換）來完成。

來源

2014-02-21 17:53:37 Omar

感謝隊友，雖然我希望答案不會requrie一個hackish的approach.Seems像插件應用自己的填充導致滾動條位置永遠不會指示0反正檢測底部/頁面頂部？ –

@nathvarun不客氣。檢測頁面頂部/底部是什麼意思？抵消？ – Omar

我想檢測滾動條何時到達頁面底部，即用戶已滾動到最後一個元素。 –

雖然@奧馬爾的回答確實讓我們得到了我們想要的東西，但是在大量干擾代碼之後，我終於找到了更簡單的方法。 iscrollview插件有一組獲取器，可用於直接訪問所需的信息。

$(document).on('click','.top',function(){ 
    console.log('Scroller Position Y ='+$('.example-wrapper').iscrollview('y')); 
    console.log('Scroller Height = '+$('.example-wrapper').iscrollview('scrollerH')); 
    console.log('Wrapper Height = '+$('.example-wrapper').iscrollview('wrapperH')); 


    });

插件GitHub的頁面上的文檔並沒有真正解釋如何使用這些並且那是什麼造成了混亂。

DEMO FIDDLE

來源

2014-02-22 05:51:09

用iscrollview jquerymobile插件獲取滾動條的位置？

回答

相關問題