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