I have two questions that need to be implemented without jQuery :

  1. How to smoothly scroll the page with a wheel on JavaScript ?
  2. How to smoothly scroll the page a few pixels?

    1 answer 1

     var get = function(obj) { return document.getElementById(obj) }; get('scrollbox').onwheel = function(e) { var delta = e.deltaY; delta = (delta > 0) ? 30 : -30; get('scrollbox').style.top = delta + get('scrollbox').offsetTop + 'px'; e.preventDefault(); } get('scroll').onclick = function() { get('scrollbox').style.top = -30 + get('scrollbox').offsetTop + 'px'; } 
     #block { width: 300px; height: 300px; background-color: #dddddd; position: absolute; padding: 5px; } #scrolling { width: 100%; overflow: hidden; height: 100%; } #scrollbox { position: relative; transition: 0.2s; } #scroll { right: 0%; top: 0%; position: absolute; width: 100px; height: 25px; background-color: white; } 
     <html> <body> <div id='block'> <div id='scrolling'> <div id='scrollbox'> la <br>ga <br>ha <br>aa <br>lj <br>va <br>ja <br>la <br>va <br>aa <br>lm <br>la <br>ga <br>ha <br>aa <br>lj <br>va <br>ja <br>la <br>va <br>aa <br>lm <br>la <br>ga <br>ha <br>aa <br>lj <br>va <br>ja <br>la <br>va <br>aa <br>lm <br>la <br>ga <br>ha <br>aa <br>lj <br>va <br>ja <br>la <br>va <br>aa <br>lm <br>la <br>ga <br>ha <br>aa <br>lj </div> <div id='scroll'>прокрутить </div> </div> </div> </body> </html>