Solved

jQuery Scroll Speed

Posted on 2016-11-18
3
61 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 2

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…

856 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