search

Home >Web Front-end >JS Tutorial >js event--mouse scroll

js event--mouse scroll

巴扎黑
巴扎黑Original
2017-07-20 15:41:211512browse

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>

 <br>

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

Statement：
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
Previous article：JavaScript expressions and statementsNext article：JavaScript expressions and statements

Related articles

See more