實現頁面禁止捲動

本篇文章講述瞭如何實現頁面禁止滾動，大家對實現頁面禁止滾動不了解的話或者對實現頁面禁止滾動感興趣的話那麼我們就一起來看看本篇文章吧， 好了廢話少說進入正題吧

說明：

#1.這裡只總結頁面禁止捲動的方法，可依實際需求用js動態控制即可。
2.行動端能禁，PC自然能禁，但PC能禁，行動端不一定能禁，所以我著重講行動端
3.程式碼示範我用的zepto（或許你不會用，但一定可以看懂）

序言：

大家在做行動裝置開發的時候，難免會有禁止頁面滾動的需求，今天我就總結下行動端禁止頁面滾動的方法，希望有一種能滿足你的需求場景。

1.

 $(document).on('touchmove', function(e){
   e.preventDefault();
 })

2.

  body{    position: fixed;
    //根据需求添加top,left...
  }

3.

  body{    overflow: hidden;    /*height: 100%;*/
  }

4.點擊頁面，頁面在點擊的位置靜止，之後滑動滾動無效

//根据这个思路，你也可以去应用于元素的禁止滚动$('body').on('tap', function(e){
  $(this).css('top', ('-' + $(window).scrollTop() + 'px'));
  $(this).css('position', 'fixed');
})

5.行動端的救世主方法，如果你有相關開發經驗，會發現前面的方法在行動端神奇的失效，那麼這個方法一定可以幫到你

html,html{  overflow: hidden;  height: 100%;}

結語：

以上就是本篇文章的所有內容，大家要是還不太了解的話，可以自己多實現兩邊就很容易掌握了哦！

相關推薦：

#JavaScript實作禁止微信瀏覽器下拉回彈效果

禁止頁面快取有哪些方法

怎麼用H5加入禁止縮放功能

jQuery監聽掃碼槍禁止手動輸入的實作方法

以上是實現頁面禁止捲動的詳細內容。更多資訊請關注PHP中文網其他相關文章！