<script type="text/javascript"> // 防止內容區(qū)域滾到底后引起頁面整體的滾動 var content = document.querySelector('main'); var startY; content.addEventListener('touchstart', function (e) { //起始位置 startY = e.touches[0].clientY; }); content.addEventListener('touchmove', function (e) { // 高位表示向上滾動 // 底位表示向下滾動 // 1容許 0禁止 var status = '11'; var ele = this; //當前位置 var currentY = e.touches[0].clientY; //如果垂直偏移量scrollTop為0，說明要么內容小于容器沒有滾動條，要么大于容器但滾動條在頂部 if (ele.scrollTop === 0) { // 如果內容小于容器則同時禁止上下滾動，若大于則可以向下滾動 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { /* 1.垂直偏移量scrollTop+整個元素的尺寸offsetHeight(包括邊框)=整個內容區(qū)域scrollHeight 證明已經滾到底部了只能向上滾動； 2.其中offsetHeight(包括邊框)是否要換成clientHeight(不包括邊框)？ */ status = '10'; } //若status==11則上面三種情況都不是，這種情況是有滾動條且滾動條不在頂部也不在底部 if (status != '11') { // 判斷當前的滾動方向 var direction = currentY - startY > 0 ? '10' : '01'; /* 1.操作方向和當前允許狀態(tài)求與運算，運算結果為0，就說明不允許該方向滾動，則禁止默認事件，阻止?jié)L動 2.status為00，說明沒有滾動條，此時無論direction是上還是下，都要阻止?jié)L動 3.status為01，說明有滾動條，可以向下滾動，此時direction為01則符合向下滾動 4.status為10，說明有滾動條，可以向上滾動，此時direction為10則符合向上滾動 5.綜上a.沒有滾動條 b.滾動條在頂部但還向上滾動 c.滾動條在底部但還向下滾動 都要阻止?jié)L動 */ if (!(parseInt(status, 2) & parseInt(direction, 2))) { stopEvent(e); } } }); </script>

　　

轉載于:https://www.cnblogs.com/litterjoan/articles/5771852.html

總結

以上是生活随笔為你收集整理的判断滚动条是否到某个位置，还有滑动的方向，以此来判断什么时候阻止滚动条滚动...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。