Thuộc tính HTML DOM WheelEvent deltaY trả về một số có dấu tương ứng với việc người dùng đang cuộn lên hay cuộn xuống, nếu người dùng đang cuộn theo bất kỳ hướng nào khác, thuộc tính này sẽ trả về 0.
Cú pháp
Sau đây là cú pháp -
Trả lại số đã ký
event.deltaY
Ví dụ
Hãy để chúng tôi xem ví dụ về thuộc tính HTML DOM WheelEvent deltaY -
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaY</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#content {
width: 80px;
height: 80px;
margin: 20px 0 0 50px;
background-color: #dc3545;
transition: all 2s ease-in-out;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-WheelEvent-deltaY</legend>
<div id="content" onwheel="setControls(event)"></div>
<input type="button" value="reset" onclick="resetCSS()">
<div id="divDisplay">Scroll over div element</div>
</fieldset>
</form>
<script>
var playDiv = document.getElementById("content");
var count = 40;
function setControls(event) {
var valX = event.deltaX;
var valY = event.deltaY;
if(valY>0){
playDiv.style.transform = "scale(0.5)";
playDiv.style.backgroundColor = "rgba(0, 188, 212, 0.47)";
playDiv.style.borderRadius = "50%";
}
else if(valY<0){
playDiv.style.transform = "scale(1.5)";
playDiv.style.backgroundColor = "rgba(0, 188, 0, 0.47)";
playDiv.style.borderRadius = "0px";
}
else if(valX>0){
count+=40;
playDiv.style.transform = "translateX("+count+"px)";
}
else{
count-=40;
playDiv.style.transform = "translateX("+count+"px)";
}
}
function resetCSS(){
count = 40;
var st = "width: 80px;height: 80px;margin: 20px 0 0 50px;background-color:
#dc3545;transition: all 2s ease-in-out;";
playDiv.style = st;
}
</script>
</body>
</html> Đầu ra
Cuộn qua phần tử div theo hướng xuống -
Cuộn qua phần tử div theo hướng lên -
Nhấp vào nút đặt lại -
