滚动 div 一定数量的像素：如何滚动 div 而不会导致滚动事件

Posted 2023-02-19

【中文标题】滚动 div 一定数量的像素：如何滚动 div 而不会导致滚动事件

【英文标题】：Scroll div for certain amount of pixels: how to scroll div without causing scroll event

【发布时间】：2014-08-10 05:38:51

【问题描述】：

当用户滚动可滚动 div(list) 时，我希望它准确滚动列表项的 1 个高度 (22px)。 我遇到的问题是，如果我处理 $(element).scroll 事件并在其中执行 $(element).scrollTop(previousScrollTop + 22) ，则会触发新的“scroll”事件，并且将再次递归调用我的处理程序。

请看一下这个例子： http://jsfiddle.net/VAFkk/1/

如何实现滚动一定数量的像素？ 我怎样才能 在不触发“滚动”事件的情况下更改滚动顶部？

如果有任何建议，我们将不胜感激。 使用 JQuery 1.9.1。

javascript：

var previousScrollTop = $('.list').scrollTop();

// Bind scroll handler so that it scrolls exactly 22px.
$('.list').scroll(function() 
    console.log('scroll happened');
    var listElement = $(this);
    var currentScrollTop = listElement.scrollTop();

    if (currentScrollTop > previousScrollTop) 
        listElement.scrollTop(previousScrollTop + 22);
     else if (currentScrollTop < previousScrollTop) 
        listElement.scrollTop(previousScrollTop - 22);
    

    previousScrollTop = currentScrollTop;
);

html：

<div class="list">
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
</div>

CSS：

.list 
    border: 1px solid red;
    max-height: 88px;
    overflow-y: auto;


.list-item 
    border: 1px solid blue;
    height: 20px;

【问题讨论】：

设置标志ignorescroll，默认false，如果标志true，设置false并返回

你能改一下jsFiddle吗？据我所知，它不起作用。如果我理解正确：jsfiddle.net/VAFkk/2

类似的东西，但仍然不是...jsfiddle.net/VAFkk/3

我想我明白了：jsfiddle.net/VAFkk/4 谢谢。

不，有时仍然表现得很奇怪。

【参考方案1】：

(function (step)  // capture variables so you don't pollute
    var prev = $('.list').scrollTop(),
        ignore_scroll = false; // flag
    // declare what we want to do
    function scroll_function(e) 
        var me, cur;
        // if flag true, don't do anything more
        if (ignore_scroll) return;
        // get vars after check (saves needless calls)
        me = $(this),
        cur = me.scrollTop();
        // set flag
        ignore_scroll = true;
        // do stuff
        if (cur > prev) me.scrollTop(prev += step);
        else if (cur < prev) me.scrollTop(prev -= step);
        // unset flag
        ignore_scroll = false;
        /* optional bonus, fix odd ends
        prev = prev - (prev % step)
        */
    
    // add handler
    $('.list').scroll(scroll_function);
(22)); // invoke

【讨论】：

哇，非常感谢。额外感谢 cmets。很久以来我得到的最佳答案。在 Chrome 和 IE 10 中完美运行。如果有人需要，这里是 jsfiddle：jsfiddle.net/Fwt68/1