Javascript 滚动div以获得一定数量的像素：如何滚动div而不引起滚动事件

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

请看一看这个例子：

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

如有任何建议，我们将不胜感激。 使用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;
});

（函数（步骤）{//捕获变量，这样您就不会污染环境
var prev=$（'.list'）.scrollTop（），
忽略\u scroll=false；//标志
//宣布我们想要做什么
功能滚动\功能（e）{
变我，cur；
//如果flag为true，则不再执行任何操作
如果（忽略滚动）返回；
//检查后获取VAR（节省不必要的调用）
me=$（这个），
cur=me.scrollTop（）；
//设旗
忽略滚动=真；
//做事
如果（cur>prev）me.scrollTop（prev+=step）；
否则，如果（当前<上一个）me.scrollTop（上一个-=步骤）；
//未设置的标志
忽略滚动=错误；
/*可选奖金，固定奇数
上一步=上一步-（上一步百分比）
*/
}
//添加处理程序
$（'.list'）。滚动（滚动功能）；
}(22)); // 援引

设置一个标志

ignorescroll

，deafolt

false

，如果标志

true

，则将其设置为

false

并返回您可以更改JSIDLE吗？据我所知，它不起作用。如果我没弄错的话：像这样的事情，但仍然不是。。。我想我明白了：谢谢。不，有时候还是表现得很奇怪。哇，太谢谢你了。另外感谢您的评论。这是我很久以来得到的最好的答案。在Chrome和IE 10中完美工作。如果有人需要它，这里是JSFIDLE：

<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>

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

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

(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