Добавление высоты к top через js

167

19 августа 2019, 10:00

Пытаюсь создать прокрутку блока при клике на кнопку. Идея такова: При клике кнопки вниз добавлять к элементу изначально имеющему top:0, 10px. И так до определенного предела, например 200px, далее запретить добавление. Так же и вверх, когда доходит до нуля - запретить добавление. JQuery не вариант, нужен нативный JS.

Буду рад примерам.

Answer 1

В целом как-то так:

var div = document.getElementById('scrollDiv'); 
 
document.getElementById('bottom').onclick = function(e) { 
  div.scrollTop = div.scrollTop > 190 ? 200 : div.scrollTop + 10; 
} 
 
document.getElementById('top').onclick = function(e) { 
  div.scrollTop = div.scrollTop < 10 ? 0 : div.scrollTop - 10; 
}

<div id="scrollDiv" style="overflow: auto; height: 100px;"> 
  Много строк <br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
  Много строк<br> 
</div> 
 
<a href="#" id="bottom">bottom</a> 
<a href="#" id="top">top</a>