Home > Web Front-end > JS Tutorial > body text

js event--mouse scroll

巴扎黑
Release: 2017-07-20 15:41:21
Original
1473 people have browsed it

Mouse scroll event

Regarding scroll events, it is actually quite confusing.

The compatibility differences of scroll wheel events are somewhat eclectic, not the previous IE8-party and other factions, but the FireFox faction and other factions.

Browsers including IE6 use onmousewheel, while FireFox browser alone uses DOMMouseScroll. After my own testing, even if FireFox is 19, it still doesn’t recognize onmousewheel.

The attribute used to detect the scroll value in other pies is wheelDelta. The scroll value is 120 for upwards and -120 for downwards.

The attribute used to detect the scroll value in Firefox is detail, which is -3 for scrolling up and 3 for scrolling down.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>document.onmousewheel = function(event){
                ev = event || window.event;
                alert(ev.wheelDelta);if(ev.wheelDelta > 0){//120alert('上')
                }else(//-120alert('下')
                )
                    
                
            }
            document.addEventListener("DOMMouseScroll", function(ev) {
                alert(ev.detail);if(ev.detail < 0){//-3alert(&#39;上&#39;)
                }else(//3alert(&#39;下&#39;)
                )
            });</script>
    </body>
</html>
Copy after login

 <br>
Copy after login

The above is the detailed content of js event--mouse scroll. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!