移動端實現元素局部滾動（滾動某元素時不滾動整個網頁）

標籤：頁面   滾動   控制   idt   blog   over   移動   lis   捲軸   

方法：使用布局控制

頁面中內容要放在一個和網頁一樣大的元素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可以正常滾動，但網頁不會發生滾動

移動端實現元素局部滾動（滾動某元素時不滾動整個網頁）