HTML DOM WheelEvent deltaY प्रॉपर्टी एक हस्ताक्षरित संख्या लौटाती है जो इस बात से संबंधित है कि उपयोगकर्ता ऊपर या नीचे स्क्रॉल कर रहा है, यदि उपयोगकर्ता किसी अन्य दिशा में स्क्रॉल कर रहा है तो यह प्रॉपर्टी 0.
सिंटैक्स
निम्नलिखित वाक्य रचना है -
वापसी हस्ताक्षरित संख्या
event.deltaY
उदाहरण
आइए 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> आउटपुट
नीचे की दिशा में डिव एलिमेंट पर स्क्रॉल करना -
ऊपर की दिशा में div एलिमेंट पर स्क्रॉल करना -
रीसेट बटन पर क्लिक करना -
