jQuery手機禁用頁面內容垂直滾動

我如何禁用jQuery移動中的垂直內容滾動？我想禁用頁面內容的所有滾動。謝謝。jQuery手機禁用頁面內容垂直滾動

我創建jquery.mobile頁面並在內容中添加jquery.mobile.scrollview。當我使用scrollview我的頁面內容滾動頂部和底部。我如何禁用滾動內容？我的頁面代碼：

<div id="page2" data-role="page" align="center"> 
    <div data-role="content"> 
     <div id="mydatacontent" class="form"> 
      <div class="data-table-shadow" data-scroll="y" class="square single-block-view-v" style="height: 750px;"> 
       <table id="datatable" class="data-table"> 
        <tbody id="datatableContent"> 
         <!-- Table Data Here --> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div>

來源

2012-04-02 MaeSTRo

你想停止滾動兩個方向或只是垂直... event.preventDefault會幫助你防止滾動 – iDroid 2012-04-02 19:43:34

您可以綁定到touchmove事件和return false防止touchmove事件的默認行爲：

$(document).delegate('.ui-content', 'touchmove', false);

這應該禁用滾動所有data-role="content"元素。如果您只希望在某個/某些頁面上使用此功能，則可以更新.ui-content選擇器以更具體。

這裏是一個演示中，你可以嘗試在移動設備上：http://jsfiddle.net/RKXLH/embedded/result/

來源

2012-04-02 20:03:25 Jasper

只是想讓你知道在你的代碼片段的最後有一個*討厭的*隱形字符。我複製/粘貼它玩，它沒有工作。只有經過15分鐘的鬥爭才能看出這一點。 – 2013-09-09 06:58:52

@JoãoCunha有趣的是，我什麼也沒看到。可能是頁面字符集與您在編輯器應用程序中使用的字符集之間的區別。 – Jasper 2013-10-01 21:56:10

可以確認，在Windows上的phpstorm中我也發生過。刪除該行並手動重新輸入以修復該行。 – 2017-11-01 12:38:52

我發現上面的回答運作良好。但是，這將阻止滾動「.ui-content」的子元素。我使用

「scrollstart」

事件，而不是和子元素仍然是滾動的。

$(document).delegate(".ui-content", "scrollstart", false);

在iOS6 webview上測試。

來源

2012-12-20 15:25:55 PetiPablo

上述方法有效。但如何恢復它？即如果在滾動停止之後，再次如果我們想要開始滾動，那麼應該做什麼？ - 謝謝 – Mak 2013-02-14 12:17:53

@Mak然後，您應該使用'.undelegate（）'：http://api.jquery.com/undelegate/刪除委託事件處理程序。如果您使用'.on（）'，那麼您可以使用'.off（）'來移除事件處理程序。 '.live（）'有'.die（）'，但是你應該在這個時候遠離'.live（）'。 – Jasper 2013-05-16 22:38:30

@Jasper做了同樣的事情......它的工作！ – Mak 2013-05-17 11:25:58

以我的經驗，你需要做的是這樣的：

var touchScroll = function(event) { 
    event.preventDefault(); 
}; 

$('element1').click(function() { 
    //this will disable the scroll 
    $(this).bind('touchmove', touchScroll); 

    $('element2').click(function() { 
     //this will enable scrolling 
     $(document).unbind('touchmove', touchScroll); 
    }); 
}

部件1和element2的可以是任何你想要的，當然點擊功能僅僅是例子，你可以選擇任何你想要的功能。

來源

2014-06-25 09:59:40 dcdeiv

它的作品......非常感謝你......上帝保佑你...... – 2014-11-27 07:43:15

jQuery手機禁用頁面內容垂直滾動

回答

相關問題