Resume scroll position after stopping scroll

Question

Fiddle

I have scrolled the dash with buttons, but the problem is that it seems like an error when the user scrolls using their wheel. Therefore, in order to solve this problem, I thought about 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));
  });
};

But I don’t know how to proceed.

Answer 1

Instead of checking when scrolling is stopped, instead, I would check the direction of scrolling. I also added click function checking, so scrollValueI can’t go out of range, which leads to dead button clicks

var scrollValue = 0,
    scrollAmount = 60,
    ul = $('#numbers'),
    maxScroll = (ul.children('li').length * scrollAmount) - ul.height(),
    up = $('#up'),
    down = $('#down');

down.click(function () {
    if (scrollValue < maxScroll) {
        scrollValue += scrollAmount;
        ul.stop().animate({
            scrollTop: scrollValue
        });
    }
});

up.click(function () {
    if (scrollValue > 0) {
        scrollValue -= scrollAmount;
        ul.stop().animate({
            scrollTop: scrollValue
        });
    }
});

ul.on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();
    if (!$(this).is(':animated')) {
        if (e.originalEvent.wheelDelta >= 0) {
            up.click();
        } else {
            down.click();
        }
    }
});

ul {
    padding: 0;
    margin: 0;
    height: 180px;
    overflow: auto;
}
li {
    height: 50px;
    background: pink;
    list-style: none;
    margin-bottom: 10px;
    height: 50px;
}
body {
    padding: 0;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="numbers">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>

Run codeHide result

Answer 2

, :

$(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;
    });
}
});

, .

Answer 3

Instead of saving scrollValue, you should calculate the current scroll ul and add the amount of scroll to this value

var scrollValue = $('ul').scrollTop();
scrollValue = scrollValue + 60;

https://jsfiddle.net/dango_x_daikazoku/od00zxa0/