Solved

jQuery Scroll Speed

Posted on 2016-11-18
3
18 Views
Last Modified: 2016-11-23
What lines do I need to adjust to speed up or slow down the mouse scroll speed?

<script>
Math.easeOutQuad = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };

(function() { // do not mess global space
var
  interval, // scroll is being eased
  mult = 0, // how fast do we scroll
  dir = 0, // 1 = scroll down, -1 = scroll up
  steps = 50, // how many steps in animation
  length = 30; // how long to animate
function MouseWheelHandler(e) {
  e.preventDefault(); // prevent default browser scroll
  clearInterval(interval); // cancel previous animation
  //
  
  
  var c = navigator.userAgent.toLowerCase(),
	isSafari = (~c.indexOf("safari") && !~c.indexOf("chrome"));
            if(isSafari) {
                //++mult; // we are going to scroll faster
            } else {
                ++mult; // we are going to scroll faster
            }
            
  var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // cross-browser
  if(dir!=delta) { // scroll direction changed
     
      var d = navigator.userAgent.toLowerCase(),
	isSafari = (~d.indexOf("safari") && !~d.indexOf("chrome"));
            if(isSafari) {
                mult = 14; // start slowly
            } else {
                mult = .2; // start slowly
            } 
        dir = delta;
    }
  
  // in this cycle, we determine which element to scroll
  for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) {
    var oldScroll = tgt.scrollTop;
    tgt.scrollTop+= delta;
    if(oldScroll!=tgt.scrollTop) break;
    // else the element can't be scrolled, try its parent in next iteration
  }
  var start = tgt.scrollTop;
  var end = start + length*mult*delta; // where to end the scroll
  var change = end - start; // base change in one step
  var step = 0; // current step
  interval = setInterval(function() {
    var pos = Math.easeOutQuad(step++,start,change,steps); // calculate next step
    tgt.scrollTop = pos; // scroll the target to next step
    if(step>=steps) { // scroll finished without speed up - stop animation
      mult = 0; // next scroll will start slowly
      clearInterval(interval);
    }
  },10);
}

Open in new window

0
Comment
Question by:rgranlund
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 41893626
line 56
0
 
LVL 1

Assisted Solution

by:Andrew Derse
Andrew Derse earned 250 total points
ID: 41893651
Also test line #10 as that is the length of the animation. If you want the animation to last longer -> increase the number 30, shorter -> decrease the number 30.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 41894448
This does not seem to work on Safari and iPads.  Is there something I need to add to the code to make it work on those browsers?
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Serialize On-Key-Up Functions 3 29
adding parameters to the url using jquery 2 29
jQuery animation faster 1 18
gif overlay 3 33
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now