此类事件是手机 touchmove 默认事件行为,可以通过 js 代码隐藏事件:
- $('body').on('touchmove', function (event) {event.preventDefault();});
OR
- document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
但这样往往会把页面原生的 scroll 效果也一同去掉了 也就是说所有都无法滚动了,下面的代码可以完美解决这个问题:
- var overscroll = function(el) {
- el.addEventListener('touchstart',
- function() {
- var top = el.scrollTop,
- totalScroll = el.scrollHeight,
- currentScroll = top + el.offsetHeight;
- //If we're at the top or the bottom of the containers
- //scroll, push up or down one pixel.
- //
- //this prevents the scroll from "passing through" to
- //the body.
- if (top === 0) {
- el.scrollTop = 1;
- } else if (currentScroll === totalScroll) {
- el.scrollTop = top - 1;
- }
- });
- el.addEventListener('touchmove',
- function(evt) {
- //if the content is actually scrollable, i.e. the content is long enough
- //that scrolling can occur
- if (el.offsetHeight < el.scrollHeight) evt._isScroller = true;
- });
- }
- overscroll(document.querySelector('.scroll'));
- document.body.addEventListener('touchmove',
- function(evt) {
- //In this case, the default behavior is scrolling the body, which
- //would result in an overflow. Since we don't want that, we preventDefault.
- if (!evt._isScroller) {
- evt.preventDefault();
- }
- });
详情见: prevent-overscroll
一个更简洁的方法
- function stopDrop() {
- var lastY;//最后一次y坐标点
- $(document.body).on('touchstart', function(event) {
- lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
- });
- $(document.body).on('touchmove', function(event) {
- var y = event.originalEvent.changedTouches[0].clientY;
- var st = $(this).scrollTop(); //滚动条高度
- if (y >= lastY && st <= 10) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。
- lastY = y;
- event.preventDefault();
- }
- lastY = y;
- });
- }
来源: http://igeekbar.com/igeekbar/post/823.htm