移动端实现元素局部滚动(滚动某元素时不滚动整个网页)

Posted 云行月翔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端实现元素局部滚动(滚动某元素时不滚动整个网页)相关的知识,希望对你有一定的参考价值。

方法:使用布局控制

页面中内容要放在一个和网页一样大的元素A中 (内容中有一个元素B有滚动条)

先给body和html、元素A设置 width:100%;height:100%;

元素A设置overflow: auto;

给元素A加一个class=‘hidden’

写样式 .hidden{ overflow:hidden; }

然后写js代码(原生)

var content=document.querySelector(元素A);
var conBox=document.querySelector(含滚动的元素B);
conBox.addEventListener(‘touchstart‘,function(){
content.classList.add(‘hidden‘)
},false)
window.addEventListener(‘touchend‘,function(){
content.classList.remove(‘hidden‘)
},false)

这样滚动元素B时,元素B可以正常滚动,但网页不会发生滚动

以上是关于移动端实现元素局部滚动(滚动某元素时不滚动整个网页)的主要内容,如果未能解决你的问题,请参考以下文章

移动端局部滚动overflow失效问题

Javascript禁止父元素滚动条滚动, pc移动端均有效

移动 Web 之滚动篇

网页设计如何设置网页部分内容不随着滚动条而移动移动?

H5移动端禁止页面上下滚动

事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)