Solved

jQuery Scroll Speed

Posted on 2016-11-18
3
96 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery on click requires double click 6 44
Duplicate Elements with JS / jQuery 3 36
Merge cell above if same 1 22
Natural height and jquery 6 32
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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

739 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