Solved

jQuery Scroll Speed

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

3 Use Cases for Connected Systems

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

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

776 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