0

I was wondering if I can detect native scrollbar's left/right or up/down buttons click event. I want to know because I want to give a custom behaviour of the scrollbar, like scroll only in some fixed steps etc. I have used scroll function, but it doesn't exactly give me the smoothness I wanted:

var step = 200;
var nextPos=-1;
var pos;
var scrolltarget;
$(' .scrollable ul').scroll(function(e){
    clearTimeout($.data(this, 'scrollTimer'));
    scrolltarget=$(this);
    $.data(this, 'scrollTimer', setTimeout(function() {
        pos=scrolltarget.scrollLeft();
        if(pos%step!=0){
          if(pos>nextPos){
            scrolltarget.animate({
              scrollLeft: pos-pos%step+step
            },250);
          }
          else if(pos<nextPos){
            scrolltarget.animate({
              scrollLeft: pos-pos%step
            },250);
          }
        }

        nextPos=scrolltarget.scrollLeft();
    }, 250));         
});
user3086871
  • 671
  • 3
  • 7
  • 25

1 Answers1

1

you can use 

$( window ).scroll(function() {
 // your java script code 
});

i recommend you to see this scroll jquery event.

Mohamed Allam
  • 71
  • 3
  • I used this but only problem is scroll is a general event and it is very difficult to do different things when user interact with scrollbars differently, like they can use mousewheel, they can drag the scrollbar, they can click the scrollbutton etc. While my code smoothes out other interactions, it doesn't quite work well when a user scrolls using mouse button. – user3086871 Mar 09 '16 at 07:15
  • see this for mousewheel event [Use jQuery to check mousewheel event without scrollbar](http://stackoverflow.com/questions/18880159/use-jquery-to-check-mousewheel-event-without-scrollbar) . – Mohamed Allam Mar 09 '16 at 07:21
  • Thank you, I have already seen that thread. I have used mousewheel plugin and written a code for mousewheel event. with my current code there is no problem with mousewheel. I just want to give a separate bahaviour if scrollbar button is clicked. – user3086871 Mar 09 '16 at 07:27
  • this plugin [jQuery custom content scroller](http://manos.malihu.gr/jquery-custom-content-scroller/) is talking about making custom scroll bar with alot of events , i hope it will help . – Mohamed Allam Mar 09 '16 at 07:41
  • thank you, but I also used malihu custom scrollbar plugin, itn't not lightweight.As I am applying horizontal scrolling, when the page loads initially all look garbled up. If I call the methods in window.load(), the browser hangs for some moment, which is in my opinion is not so smooth. I was trying other plugins but couldn't find a simple enuf plugin which enables stepwise scrolling. – user3086871 Mar 09 '16 at 08:09