zoukankan      html  css  js  c++  java
  • 封装自己的scroll

    【教学视频】封装自己的scroll案例:

    测试:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                height:5500px;
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>
    <script>
        window.onscroll = function() {
            //【<!DOCTYPE html> 别名DTD】
            // ie9以上及其他高版本浏览器都支持window.pageYOffset(无论有没有DTD),但是ie678不认识(无论有没有DTD)。
            // ie678 认识document.documentElement.scrollTop(加不加DTD都认识) 火狐必须加上DTD才认识,谷歌加不加都不认识
            //document.body.scrollTop 只有谷歌认识(加不加DTD都认识)
    
            var scrollTop = window.pageYOffset  || document.documentElement.scrollTop
                || document.body.scrollTop || 0;;
            document.title = scrollTop;
    
            /* window.pageYOffset  
           document.documentElement.scrollTop document.body.scrollTop;
    */ } </script>

    封装:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                height: 3000px;
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>
    <script>
        function scroll() {
            if(window.pageXOffset != null) {    // 非IE 678
                return {
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            return {
                left:document.documentElement.scrollLeft,
                top:document.documentElement.scrollTop
            }
        }
    
        window.onscroll = function() {
            document.title = scroll().top;
        }
    </script>

    火狐:

    谷歌:

    IE9+:

    IE6,7,8:

    前进时,请别遗忘了身后的脚印。
  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/liudaihuablogs/p/9460016.html
Copyright © 2011-2022 走看看