CSS mobile forbids t event scrolling

nest a layer of div, outside the body and dynamically set its height to window.height (), to finally disable the scrolling of the original page (the page wrapped by div) when another page pops up on the mobile side.

question: how to get the height under each screen to the height of the .wrapper container? Or other implementation methods?

what I want to achieve is that overflow:hidden;, that is, hides the scroll bar and forbids scrolling.
is currently used as follows:

overflow:hidden;
position:fixed;
left:0;
top:0;
there is just a small problem. When triggered, the page will be at the top, because left:0,top:0
I also use someone else"s method, because there is something wrong with the above method, so I want to try another one, but I didn"t make it.
https://www.jb51.net/css/5759.

Html:

<html>
<style>
.wrapper{
   height:window.height();//window.height()
}
</style>
<div class="wrapper">
<body>

</body> </div> </html>

js looks like this:


var innerHeight =  window.innerHeight; 
        var clientHeight = document.body.clientHeight;
Css
Jul.06,2021

your body is so good


  1. first of all, don't pack anything outside body except html. The code must be standardized, otherwise don't blame bug for visiting.
  2. if you just prohibit sliding, it's very simple, just add a pointer-events:none; attribute to directly disable the touch event, and don't add it.
Menu