35.滚动 scroll

Suyuoa

已于 2022-09-15 09:44:07 修改

阅读量1k

点赞数

分类专栏： JavaScript笔记文章标签： javascript

于 2022-07-26 13:37:52 首次发布

本文链接：https://blog.csdn.net/potato123232/article/details/125992859

版权

JavaScript笔记专栏收录该内容

69 篇文章 4 订阅

订阅专栏

1 返回自身宽度 element.scrollWidth

2 返回自身高度 element.scrollHeight

3 sroll返回自身尺寸与client返回自身尺寸的区别

4 被卷去的上侧距离 element.scrollTop

5 被卷去的左侧距离 element.scrollLeft

6 模仿淘宝侧边栏

7 页面移动到指定位置 window.scroll(x,y)

8 页面被卷去的上侧距离 window.pageYOffset

9 页面被卷去的左侧距离 window.pageXOffset

scroll与滚动条相关，主要有下面几个属性

与其他大小属性的区别如下

1 返回自身宽度 element.scrollWidth

scrollWidth返回的数值中包含padding，但不包含border与margin。scrollWidth返回的结果没有单位

123 = 103 + 10 * 2

2 返回自身高度 element.scrollHeight

scrollHeight返回的数值中包含padding，但不包含border与margin。scrollHeight返回的结果没有单位

186 = 166 + 10 * 2

3 sroll返回自身尺寸与client返回自身尺寸的区别

盒子中的内容超出了盒子本身尺寸的时候，scroll是按照内容走的，client不管内容只按照盒子原来的尺寸走

宽度如果超出和高度一样

4 被卷去的上侧距离 element.scrollTop

下面图的红色框子是div盒子的可视区域

把滚动条搞出来后，搞一个按钮进行监测

没滚动的时候是0

5 被卷去的左侧距离 element.scrollLeft

我们将div中的内容设置为不换行，然后搞个按钮监测

6 模仿淘宝侧边栏

打开之后的侧边栏是这样的

当滚到一定程度后会增加一个会顶部

代码是这样的

<!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>
        body {
            height:3000px;
            background-color: rgb(232,226,224);
        }

        .alongside {
            position: fixed;
            top: 50%;
            right:0px;
            transform: translate(0,-50%);
            width:80px;
            background-color: white;
            border-radius: 20px 0px 0px 20px;
        }

        div {
            height:60px;
            display:flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            padding:5px;
        }

        .return_top {
            display:none;
        }

    </style>
</head>
<body>
    <section class="alongside">
        <div>
            <img src="images/官方客服.png" alt="">
            <span>官方客服</span>
        </div>
        <div>
            <img src="images/反馈.png" alt="">
            <span>反馈</span>
        </div>
        <div>
            <img src="images/举报.png" alt="">
            <span>举报</span>
        </div>
        <div class="return_top">
            <img src="images/回顶部.png" alt="">
            <span>回顶部</span>
        </div>
    </section>
</body>
<script>
    return_top = document.querySelector('.return_top')
    
    document.body.onscroll = function() {
        console.log(document.documentElement.scrollTop)
        if (document.documentElement.scrollTop > 500) {
            return_top.style.display = 'flex';
        }
        else {
            return_top.style.display = 'none';
        }
    }
</script>
</html>

打开后是这样的