특정 양의 픽셀에 대한 div 스크롤 : 스크롤 이벤트를 발생시키지 않고 div를 스크롤하는 방법

사용자가 스크롤 가능한 div (list)를 스크롤 할 때 목록 항목 (22px)의 정확히 1 높이로 스크롤하기를 원합니다. 내가 가진 문제는 내가 $ (element) .scroll 이벤트를 처리하고 그 안에서 $ (element) .scrollTop (previousScrollTop + 22)을 실행하면 새로운 "scroll"이벤트가 발생하고 내 핸들러가 재귀 적으로 다시 호출된다는 것입니다.

이 예제를보십시오 : http://jsfiddle.net/VAFkk/1/

특정 양의 픽셀을 스크롤하려면 어떻게해야합니까?
"scroll"이벤트를 발생시키지 않고 scrollTop을 어떻게 변경할 수 있습니까?

어떤 제안이라도 감사하겠습니다. JQuery 1.9.1이 사용됩니다.

자바 스크립트 :

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