CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex Petralia
Alex Petralia

Reputation: 1770

Change HTML scroll bar increment amount

I have an HTML div with CSS set to overflow but I am unable to set the scroll increment.

I implemented the example in this question and this JSFiddle.

However, I noticed that the scrollbar (even in the JSFiddle) barely increments when you click on the empty space on the scrollbar. This does not seem like normal behavior - normally the scroll increment is much larger.

I looked into .scrollLeft():

$('.wmd-view-topscroll').animate({scrollLeft: '+=30'}, 0);

However, I haven't seen any change in the scroll increment. How do you increase the size of the step here?

Upvotes: 0

Views: 1516

Answers (2)

doubleOrt
doubleOrt

Reputation: 2507

I knew where the bug was coming from as soon as i saw your code, however it might take me some time to figure out a way to explain the logic causing the bug to myself or to you.

For now, here is the solution to increasing the step of the scroll based on the JSFiddle example you provided: (However make sure you are not running an ancient version of JQuery, otherwise this solution won't work, tested on version 1.9.1 and everything works)

$(function(){
$(".wmd-view-topscroll").on("scroll",function(){

clearTimeout($.data(this, 'scrollTimer'));

$.data(this, 'scrollTimer', setTimeout(function() {
    $(".wmd-view").scrollLeft($(".wmd-view-topscroll").scrollLeft());
}, 50));

});
$(".wmd-view").on("scroll", function(){
    $(".wmd-view-topscroll").scrollLeft($(".wmd-view").scrollLeft());
});

});

What the part i added does, is it waits for the scrolls to finish before it sets the new scroll on the other element, i just felt like setting the timeout to 50, set it to anything you like as long as it is long enough for the scrollbar to reach the point where you clicked.

Edit 1: thanks to @Schlumpf for clearing up my doubts, you have 2 events and the other is called whenever you call one of them, and that other one in turn calls back the one that called it and sets its new scroll to be the current scroll of itself (the second element's scroll) therefore overwriting the original scroll you wanted. As @Schlumpf pointed out, just try to make a console.log([whatever]) whenever you call one of the scroll events to see what we are talking about.

Please ask in the comments if you need me to elaborate more.

Edit 2: As Rob explained in the comments, this is not an easy question to answer because the problem is not clear enough. So try to be explain your problem in more detail next time OP. And just in case the fiddle we are talking about is deleted by its original owner or whatever, here is a link to the fiddle we are talking about, just in case.

Upvotes: 2

Schlumpf
Schlumpf

Reputation: 376

Due to the fact that you are looking on both sidebars they will obstruct themselves. If you delete one scroll event, the click behaviour on the white space is normally.

If you add a console.log you can see a bad issue on the code:

$(".wmd-view-topscroll").scroll(function(){
    console.log("test");
        $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });

You will see that the scroll event is fired multiple times with only one mouse click. That's the problem of the bad behaviour. The two scroll events obstruct themeselves, when you press into the white space.

I think you would need something like onScrollFinished in order to fix this issue.

Upvotes: -2

Related Questions