index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Направление: <span id="line">0</span></p>
<p>Скорость: <span id="speed">0</span></p>
<div id="test">
<div id="test2"></div>
</div>
</body>
</html>
style.css
#test {
width: 600px;
height: 100px;
background: yellow;
margin: 50px;
position: relative;
}
#test2{
width: 10px;
height: 100px;
background: blue;
position: absolute;
left: 290px;
top: 0;
}
1.js
// onwheel - событие при прокрутке колеса мыши
document.onwheel = function(event) {
console.log(event);
// deltaY - определяет направление
if(event.deltaY > 0) {
document.getElementById('line').innerHTML = 'вниз';
}
else {
document.getElementById('line').innerHTML = 'вверх';
}
var speed = event.deltaY;
speed = Math.abs(speed);
if(speed < 100) {
document.getElementById('speed').innerHTML = 'низкая';
}
else if (speed < 150) {
document.getElementById('speed').innerHTML = 'средняя';
}
else if (speed < 250) {
document.getElementById('speed').innerHTML = 'высокая';
}
else {
document.getElementById('speed').innerHTML = 'очень высокая';
}
}
var left = 290;
document.getElementById('test').onwheel = function(event) {
var line = event.deltaY;
left = left + 0.2*line;
document.getElementById('test2').style.left = left + 'px';
return false; // отменим прокрутку в вертикальном направлении
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<p>Направление: <span id="line">0</span></p>
<p>Скорость: <span id="speed">0</span></p>
<div id="test">
<div id="test2"></div>
</div>
</body>
</html>
style.css
#test {
width: 600px;
height: 100px;
background: yellow;
margin: 50px;
position: relative;
}
#test2{
width: 10px;
height: 100px;
background: blue;
position: absolute;
left: 290px;
top: 0;
}
1.js
// onwheel - событие при прокрутке колеса мыши
document.onwheel = function(event) {
console.log(event);
// deltaY - определяет направление
if(event.deltaY > 0) {
document.getElementById('line').innerHTML = 'вниз';
}
else {
document.getElementById('line').innerHTML = 'вверх';
}
var speed = event.deltaY;
speed = Math.abs(speed);
if(speed < 100) {
document.getElementById('speed').innerHTML = 'низкая';
}
else if (speed < 150) {
document.getElementById('speed').innerHTML = 'средняя';
}
else if (speed < 250) {
document.getElementById('speed').innerHTML = 'высокая';
}
else {
document.getElementById('speed').innerHTML = 'очень высокая';
}
}
var left = 290;
document.getElementById('test').onwheel = function(event) {
var line = event.deltaY;
left = left + 0.2*line;
document.getElementById('test2').style.left = left + 'px';
return false; // отменим прокрутку в вертикальном направлении
}
Комментариев нет:
Отправить комментарий