首页 > 移动平台 > 详细

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

时间:2017-12-11 18:20:55      阅读:482      评论:0      收藏:0      [点我收藏+]

方法:使用布局控制

页面中内容要放在一个和网页一样大的元素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可以正常滚动,但网页不会发生滚动

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

原文:http://www.cnblogs.com/sgqwjr/p/8023811.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!