Can I change the scroll speed using css or jQuery

Question

In the example below  I would like to reduce the scroll speed of the div s content  especially when using the mouse wheel  as one wheel tick scrolls approximately the div s height   Is it possible to control that with CSS  and if not  javascript  perhaps using jQuery      x000D   x000D   scrollable   x000D      width  500px  x000D      height  70px  x000D      overflow  auto   x000D    x000D   lt div class  scrollable  gt  x000D      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur  x000D   lt  div gt  x000D   x000D   x000D    Note  I realize that the scroll speed might differ between os browers and browser settings  But I think that in the majority of the cases  the scroll speed  when using the mouse wheel  is too fast  so I would like to slow it down

User · Answer

Just use this js file   I mentioned 2 examples with different js files  hope the second one is what you need  You can simply change the scroll amount  speed etc by changing the parameters   https   github com nathco jQuery scrollSpeed   Here s a Demo   You can also try this  Here s a demo

User · Answer

No  Scroll speed is determined by the browser  and usually directly by the settings on the computer device   CSS and Javascript don t  or shouldn t  have any way to affect system settings   That being said  there are likely a number of ways you could try to fake a different scroll speed by moving your own content around in such a way as to counteract scrolling  However  I think doing so is a HORRIBLE idea in terms of usability  accessibility  and respect for your users  but I would start by finding events that your target browsers fire that indicate scrolling    Once you can capture the scroll event  assuming you can   then you would be able to adjust your content dynamically so that the portion you want is visible   Another approach would be to deal with this in Flash  which does give you at least some level of control over scrolling events

User · Answer

I just made a pure Javascript function based on that code  Javascript only version demo  http   jsbin com copidifiji  That is the independent code from jQuery  if  window addEventListener   window addEventListener  DOMMouseScroll   wheel  false    window onmousewheel   document onmousewheel   wheel    function wheel event        var delta   0      if  event wheelDelta  delta    event wheelDelta  120       else if  event detail  delta   - event detail  3       handle delta       if  event preventDefault  event preventDefault        event returnValue   false     function handle sentido        var inicial   document body scrollTop      var time   1000      var distance   200    animate       delay  0      duration  time      delta  function p   return p        step  function delta    window scrollTo 0  inicial-distance delta sentido                 function animate opts      var start   new Date      var id   setInterval function         var timePassed   new Date   - start      var progress    timePassed   opts duration       if  progress  gt  1   progress   1       var delta   opts delta progress       opts step delta       if  progress    1   clearInterval id      opts delay    10

User · Answer

The scroll speed CAN be changed  adjusted  reversed  all of the above - via javascript  or a js library such as jQuery    WHY would you want to do this  Parallax is just one of the reasons  I have no idea why anyone would argue against doing so -- the same negative arguments can be made against hiding DIVs  sliding elements up down  etc  Websites are always a combination of technical functionality and UX design -- a good designer can use almost any technical capability to improve UX  That is what makes him her good   Toni Almeida of Portugal created a brilliant demo  reproduced below   jsFiddle Demo  HTML    lt div id  myDiv  gt      Use the mouse wheel  not the scroll bar  to scroll this DIV  You will see that the scroll eventually slows down  and then stops   lt span class  boldit  gt Use the mouse wheel  not the scroll bar  to scroll this DIV  You will see that the scroll eventually slows down  and then stops   lt  span gt   lt  div gt    javascript jQuery     function wheel event          var delta   0        if  event wheelDelta    delta   event wheelDelta   120          else if  event detail    delta   -event detail   3           handle delta         if  event preventDefault    event preventDefault            event returnValue   false         function handle delta          var time   1000        var distance   300            html  body   stop   animate             scrollTop    window  scrollTop   -  distance   delta           time           if  window addEventListener   window addEventListener  DOMMouseScroll   wheel  false        window onmousewheel   document onmousewheel   wheel    Source   How to change default scrollspeed scrollamount scrollinertia of a webpage

[jquery] Can I change the scroll speed using css or jQuery?

Examples related to jquery

Examples related to css

Examples related to scroll