0

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?

CyanCoding
  • 1,012
  • 1
  • 12
  • 35
Alex Petralia
  • 1,730
  • 1
  • 22
  • 39
  • You are required to post your example code here, not a third party web site which can change or disappear tomorrow. https://stackoverflow.com/help/mcve – Rob Jun 22 '17 at 03:41
  • Just in case the owner of the fiddle decides to delete their fiddle, [here]( **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](https://jsfiddle.net/double_ort/rw4qgpm2/) to the fiddle we are talking about (sorry for the redundancy Rob). – doubleOrt Jun 22 '17 at 12:52

2 Answers2

2

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.

doubleOrt
  • 2,407
  • 1
  • 14
  • 34
  • I copied and pasted your code into the JSFiddle and it fixes the scroll problem but it doesn't actually scroll the table anymore – Alex Petralia Jun 21 '17 at 23:22
  • @AlexPetralia make sure you are running the latest version of JQuery in JSFiddle and everything will work fine (click on the Javascript button on the top-right, click on the JQuery dropdown and change it to a newer version). In the fiddle, an old version of JQuery is used which does not support my method of setting a timeout. The idea is to not scroll the other element until the current element finishes scrolling. – doubleOrt Jun 22 '17 at 10:20
  • @AlexPetralia Just tested this on version 1.9.1 and everything works fine. – doubleOrt Jun 22 '17 at 10:29
  • @AlexPetralia Additionally, if you do not to wait until an element finishes scrolling to scroll the other, then you will have to figure out a way to prevent the event that is called from the other element's scroll event from setting the scroll of the element that originally called it (this may be a bit hard to process, just read it multiple times). – doubleOrt Jun 22 '17 at 10:32
  • @Taurus You are doing SO a disservice by answering this question which does not supply the code required on SO itself which is a requirement. When that jsfiddle changes or disappears, your answer and the question will become worthless and useless to anyone with the same problem in the future. "Answer well-asked questions Not all questions can or should be answered here." https://stackoverflow.com/help/how-to-answer – Rob Jun 22 '17 at 11:35
  • @Rob JSFiddle may disappear: Alright, i copied the code to my own account on JSFiddle and i will provide a link to it in the answer, just in case... Problem 2: Most Stackoverflow questions come for beginners (OP is not apparently), but you can't expect a user who is on a deadline to have the time to create an account and read all this site's philosophy. Also keep in mind that lots of Stackoverflow users are not native English speakers, i am not. Putting your problem into words in a foreign language can be tough. – doubleOrt Jun 22 '17 at 12:25
  • @Taurus: note that this site isn't here for the user on a tight deadline. We are here for the long haul; to gather quality questions and even better answers *for future visitors to re-use*. That the current asker gets their answer too is almost a side-effect. As such we require that questions meet a certain quality level. It is that what Rob is referring to here. – Martijn Pieters Jun 23 '17 at 07:35
-1

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.

Schlumpf
  • 358
  • 1
  • 3
  • 13