在做一个手机端的网页,发现当滚动条已经滚动到底部后,继续下拉还能再滚动1/3个body-height左右,底部出现一大块黑屏很烦。看了下有赞商城等几个比较大的H5项目,在微信浏览器也是这个问题,想问下纯css3能否禁止掉这个问题,就是当滚动条已经滚动到body的最底部的时候禁止滚动。
把body
和main
的高度设成100%
然后main{ overflow-y: scroll; }
呢?
猜测可以,没有实验过
<body>
<main></main>
</body>
纯css够呛……可以尝试当混动底部的时候。通过js……让touchmove失效。具体是否可以。还没有实验。
可以用下面的代码禁掉 下面的黑条和上面黑条。
document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
e.preventDefault();
});
但是,但是。你就不能滚动整个页面了。
在我自己场景里面,因为我监听了其他元素的touchmove,用touchmove代替了scroll,所以我是可以禁掉的。
但是如果你的H5依赖于scroll的话,就不能这样干。