webapi第五天

最新推荐文章于 2024-10-02 13:25:04 发布

魏某某某

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量52

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45356160/article/details/128020010

版权

本文详细介绍了网页滚动事件和加载事件，通过一个新浪返回顶部的实例展示了如何监听滚动并控制元素显示。同时，探讨了元素的scroll、offset和client属性，分别表示内容大小、完整盒子尺寸和可视部分尺寸。此外，还总结了这些属性在计算元素位置和距离时的应用。

摘要由CSDN通过智能技术生成

滚动事件和加载事件

在这里插入图片描述

元素大小和位置

在这里插入图片描述

scroll

这是一位佬对获取宽高的总结
在这里插入图片描述
scrollwidth和height是内容的高度和宽度

中间的黑框是游览器,粉色是内容,红色就是st

红色是sl

这个d.d就是代表的html标签,就是这种写法,记住
html包含的页面就是游览器的页面

案例新浪返回顶部

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }

        .backtop {
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .backtop a {
            height: 50px;
            width: 50px;
            background: url(./images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content"></div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        let backtop = document.querySelector('.backtop')
        window.addEventListener('scroll',function(){
            if(document.documentElement.scrollTop>=500){
                backtop.style.display = 'block'
            }
            else{
                backtop.style.display = 'none'
            }
        })
        //返回头部
        backtop.children[1].addEventListener('click',function(){
            document.documentElement.scrollTop = 0
        })

    </script>
</body>

</html>

offset

在这里插入图片描述

宽高就是div的大小

client

在这里插入图片描述
可见的部分

1111111111111111111111

总结

对于高和宽来说,scroll仅仅是内容文字的,offset是div完整盒子的,client是可见部分的.
第一个是scroll,为什么高这么大,因为他是内容的,下面还有文字,所以才这么大.
第二个是offset,是一个div的.
第三个是client,是可见内容的,也就是去除了边框,滚动条的.
在这里插入图片描述
对于左距离和上距离来说,scroll是看到的页面与内容的距离
offset是具有定位父元素的距离,client是可视区域和边框的距离