Moving side implements element local scrolling (scrolling an element without scrolling the entire page)

Method: Use Layout control

The contents of the page are placed in an element a that is as large as the Web page (there is a scrollbar in the content of element B)

First, the body and HTML, element a set width:100%;height:100%;

Element A is set Overflow:auto;

Add a class= ' hidden ' to element a

Write style. hidden{Overflow:hidden;}

Then write the JS code (native)

var content=document.queryselector (element a);
var conbox=document.queryselector (element B with scrolling);
Conbox.addeventlistener (' Touchstart ', function () {
Content.classList.add (' hidden ')
},false)
Window.addeventlistener (' Touchend ', function () {
Content.classList.remove (' hidden ')
},false)

When you scroll element b So, Element B scrolls normally, but the page does not scroll

Moving side implements element local scrolling (scrolling an element without scrolling the entire page)