滚动停止后恢复滚动位置 [英] Resume scroll position upon scroll stop

问题描述

小提琴

我确实使用按钮进行了滚动导航，但是问题是，当用户使用鼠标滚轮滚动时，它似乎有问题.因此，为了解决这个问题，我想到了捕获滚动停止位置.我找到了

I did scroll nagivation using buttons, but the problem is it seems buggy when the user scrolls using their mousewheel. So to solve this I thought of catching the scroll stop position. I found this

$.fn.scrollStopped = function(callback) {
  var that = this, $this = $(that);
  $this.scroll(function(ev) {
    clearTimeout($this.data('scrollTimeout'));
    $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
  });
};

但是不知道如何继续.

推荐答案

我认为您可能会在其中找到完整的解决方案:

I think you may find a complete solution in this :

演示

$(function() {

var itemheight = $('li').eq(0).outerHeight(true),
up, busy;

$('ul').on('wheel', function(e) {

    var direction = e.originalEvent.deltaY;

    if (direction < 0) up = true;
    else up = false;

    scrollIt();

    return false;
});

$('button').click(function() {

    if ($(this).text() == 'up') up = true;
    else up = false;

    scrollIt();
});

function scrollIt() {

    if (busy) return;
    busy = true;

    var current = $('ul').scrollTop();

    if (up) current -= itemheight;
    else current += itemheight;

    $('ul').animate({scrollTop: current}, 400, function() {

        busy = false;
    });
}
});

它可以防止动画累积，并且会像按按钮一样对待鼠标滚轮.

It prevents animation build up and will treat the mousewheel the same as if the buttons were pressed.

这篇关于滚动停止后恢复滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！