mousewheel鼠標滾輪事件響應
兼容性：
除了FireFox瀏覽器的滾輪事件響應使用的是DOMMouseScroll以外，其餘瀏覽器均使用的是onmousewheel（在使用addEventListener()添加監聽事件的時候就把“onmousewheel”的“on”去掉，變成“mousewheel”。“onclick”等監聽事件也是一樣。）
使用：
document.body.onmousewheel = function(event){
...編寫響應函數...
}
響應函數有event作參數，event有屬性wheelDelta，鼠標滾輪向下滾動時event.wheelDelta屬性值爲負且是-120的倍數，相反，鼠標滾輪向上滾動時event.wheelDelta屬性值爲正且是120的倍數。（不同瀏覽器鼠標一次滾動時這個屬性值變化值不一樣，有的甚至連續滾動幾次後會屬性值變化會加快。不妨在網頁中輸出觀察一下。）
實例
實現一個簡單的進度條可以隨着鼠標的滾動而變化進度：
首先用bootstrap4創建一個簡單的進度條：
<div class="container">
<div id="c">
<h2>基本進度條</h2>
<p>要創建一個默認的進度條，可以在容器元素上添加 .progress 類，在子元素上添加 progress-bar 類，並設置進度條進度情況：:</p>
<div class="progress" id="1" onclick="change()">
<div class="progress-bar" style="width:0%"></div>
</div>
<input type="button" id="btn" value="確定">
<p></p>
</div>
<div id="space"></div>
</div>
初始默認進度爲0。（style="width:0%"）
然後在<script>裏<body>的滾輪響應監聽事件中，用JS的DOM根據event.wheelDelta修改wdth這一屬性值：
document.body.onmousewheel = function(event){
var or = document.getElementsByClassName("progress-bar")[0].style.width;
document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";
document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";
}
document.body.onmousewheel = function(event){}創建監聽事件，當然你也可以用其他方法添加監聽事件，但一定要帶上參數event。
在監聽事件裏，var or = document.getElementsByClassName("progress-bar")[0].style.width;用一個變量or保存當前width的屬性值。
document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";用DOM獲取第二個<p>標籤，在標籤內裝填當前進度值和event.wheelDelta屬性值顯示出來。
document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";使用CSS3的calc()函數來將進度變化值(-event.wheelDelta/100)加在原有的進度or上，注意做+-的時候，運算符前後要有空格。
