У меня два вопроса, реализовать которые нужно без jQuery
:
- Как плавно прокручивать страницу колесиком на
JavaScript
? - Как плавно прокрутить страницу на несколько пикселей?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуУ меня два вопроса, реализовать которые нужно без jQuery
:
JavaScript
?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>