使用jQuery在拖动时滚动页面

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (132)

我已经尝试过使用kinetic.js和下面的代码,但是当我在IE11中尝试这个时,它每次滚动都会一直跳到顶部:

$("html").kinetic();

我想让平板电脑和IE10和11上的页面可滚动,这样用户就可以像往常一样向上滚动页面向下滚动。

如果没有它跳到顶端,我怎么能在纯JS或jQuery中做到这一点?

提问于
用户回答回答于

此代码适用于水平和垂直鼠标拖动滚动。这很简单。

var curYPos = 0,
    curXPos = 0,
    curDown = false;

window.addEventListener('mousemove', function(e){ 
  if(curDown === true){
    window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
  }
});

window.addEventListener('mousedown', function(e){ curDown = true; curYPos = e.pageY; curXPos = e.pageX; });
window.addEventListener('mouseup', function(e){ curDown = false; }); 
用户回答回答于

我只想补充一下。使用Rory的代码我做了水平滚动。

var clicked = false, base = 0;

$('#someDiv').on({
    mousemove: function(e) {
        clicked && function(xAxis) {
            var _this = $(this);
            if(base > xAxis) {
                base = xAxis;
                _this.css('margin-left', '-=1px');
            }
            if(base < xAxis) {
                base = xAxis;
                _this.css('margin-left', '+=1px');
            }
        }.call($(this), e.pageX);
    },
    mousedown: function(e) {
        clicked = true;
        base = e.pageX;
    },
    mouseup: function(e) {
        clicked = false;
        base = 0;
    }
});

扫码关注云+社区

领取腾讯云代金券