Disable scrolling of the page

This article describes how to prevent page scrolling. If you don’t know about implementing page scrolling prohibition or are interested in implementing page scrolling prohibition, then let’s take a look at this article together. Okay, without further ado, enter Let’s get to the point

Explanation:

1. Here we only summarize the methods of disabling scrolling on the page, which can be used according to actual needs. js can be dynamically controlled.
2. If the mobile terminal can be banned, the PC can naturally be banned, but if the PC can be banned, the mobile terminal may not be banned, so I will focus on the mobile terminal
3. The code demonstrates the zepto I use (you may not be able to use it, but you can definitely understand it)

Preface:

When you are doing mobile development, you will inevitably have the need to disable page scrolling. Today I will summarize the method of disabling page scrolling on the mobile end. I hope there is a scenario that can meet your needs.

1.

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

2.

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

3.

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

4.Click on the page, the page will stop at the clicked position, and then sliding and scrolling will be invalid

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

5.Savior method on the mobile side, if If you have relevant development experience, you will find that the previous method magically fails on the mobile terminal, then this method will definitely help you

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

Conclusion:

The above is all the content of this article. If you don’t know much about it, you can easily master both sides by yourself!

Related recommendations:

JavaScript implements prohibiting the pull-down rebound effect of WeChat browser

What are the ways to disable page caching

How to use H5 to add a zoom-disable function

jQuery monitoring code scanner prohibits manual input Implementation method

The above is the detailed content of Disable scrolling of the page. For more information, please follow other related articles on the PHP Chinese website!