css scroll家族

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

注：在实际测试过程中，谷歌获取的 Element.scrollWidth 和 IE，火狐下获取的 Element.scrollWidth 并不相同。本文示例浏览器环境为：Google Chrome 版本 87.0.4280.88（64 位）

1. scrollWidth 和 scrollHeight

该属性返回元素内容大小，包括由于 overflow 溢出而在屏幕上不可见的内容。
返回值是只读属性且始终是整数。
一般而言对于块状元素或者行内块儿元素：

element.scrollWidth/Height = 元素自身的宽/高(width/height) + padding

对于行内元素

element.scrollWidth/Height = 0

例如：

<div class="box" style="width:200px;height:200px"></div>

<span>hello world</span>

<a href="xxx" style="display: inline-block;">行内块标签</a>

<p>hello world</p>

<script>
    console.log("box", {
      scw: $(".box").scrollWidth,
      sch: $(".box").scrollHeight
    }); // { scw: 200, sch: 200 }

    console.log("span", {
      scw: $("span").scrollWidth,
      sch: $("span").scrollHeight
    }); // { scw: 0, sch: 0 }

    console.log("a", {
      scw: $("a").scrollWidth,
      sch: $("a").scrollHeight
    }); // { scw: 80, sch: 21 }

    console.log("p", {
      scw: $("p").scrollWidth,
      sch: $("p").scrollHeight
    }); // { scw: 可视区域的宽, sch: 21 }

    function $(selector){
      return document.querySelector(selector);
    }
</script>

注意: 如果元素内容溢出，溢出部分大小也会计算在内。

var box = $(".box");
box.style.padding = "30px";
box.style.border = "20px solid #00f";
box.innerHTML = "<div style='width: 400px;height: 400px'></div>";
box.style.overflow = "scroll";
console.log("box", {
    scw: box.scrollWidth,
    sch: box.scrollHeight
}); // { scw: 460, sch: 460 }

2. scrollTop 和 scrollLeft

当目标元素有滚动条时，这两个属性可以获取和设置该元素内容卷入的上边距和左边距，即被浏览器或父类遮挡的头部和左边部分。

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #f00;
      overflow: auto;
    }

    .inner {
      width: 500px;
      height: 500px;
    }
</style>
<body>
    <div class="box">
      <div class="inner"></div>
    </div>

    <button>让box滚动条回到 0 0</button>
    <script>
        var box = document.querySelector(".box");

        // 点击时 获取卷入的 高度 和 宽度
        box.onclick = function (){
          console.log({
            sct: box.scrollTop,
            scl: box.scrollLeft
          });
        }

        var btn = document.querySelector("button");
        // 点击时设置 卷入的 距离
        btn.onclick = function (){
          box.scrollTop = 0;
          box.scrollLeft = 0;
        }
    </script>
</body>

3. 获取文档(页面/网页)卷入的距离

对于有 doctype 声明的页面，使用：

document.documentElement.scrollTop/scrollLeft ；

对于没有 doctype 声明的页面使用：

document.body.scrollTop/scrollLeft

不管有没有 doctype 声明的页面都可以使用：

window.pageYOffset/pageXOffset IE9 以上支持

// 封装方法, 兼容写法
function getScroll(){
        return {
            sct: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,
            scl: document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft
        }
}

4. 监听网页滚动事件

4.1 scroll事件

当元素的滚动条滚动时触发的事件。用法即：Element.onscroll = function(){};

注意：设置此事件的元素一定要有滚动条；
监听页面滚动一般使用 window.onsroll=function(){}，因为 html 元素与 body 元素设置监听可能存在兼容问题。

<style>
    body {
        width: 3000px;
        height: 3000px;
    }
    .box {
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        overflow: auto;
    }
    .inner {
        width: 600px;
        height: 600px;
    }
</style>
<body>
    <div class="box">
        <div class="inner">

        </div>
    </div>
    <script>
        var box = document.querySelector(".box");
        // 监听某个元素内容的滚动事件
        box.onscroll = function(){
          console.log("box", {
              sct: box.scrollTop,
              scl: box.scrollLeft
          })  
        }
        // 监听网页的滚动事件
        window.onscroll = function(){
            console.log("window", {
                sct: window.pageYOffset,
                 scl: window.pageXOffset
            })
        }
    </script>
</body>

4.2 网页滚动的方法

window.scroll(x,y) 让网页滚动到某个位置。设置网页卷入的左边距是 x，卷入的上边距是 y
window.scrollTo(x,y) 效果和window.scroll(x,y)一样，不兼容IE。

<style>
    body {
        width: 3000px;
        height: 3000px;
    }
    .operate {
        position: fixed;
        top: 100px;
        left: 100px;
    }
</style>
<body>
    <div class="operate">
        <button>点击设置卷入上左边距为 800</button>
        <button>点击向上，向左各滑动 200</button>
    </div>
    <script>
        var btns = document.querySelectorAll("button");
        btns[0].onclick = function() {
            window.scroll(800, 800);
        }
    </script>
</body>

4.3 网页顺滑滚动

想要实现网页顺滑滚动（smooth scroll），可以使用：

html { scroll-behavior: smooth; }
window.scroll 方法传对象参数。options 是一个包含三个属性的对象：

top 卷入的上边距
left 卷入的左边距
behavior 类型 String，表示滚动行为，支持参数 smooth(平滑滚动)，instant(瞬间滚动),默认值 auto，实测效果等同于 instant

<style>

    html {
        scroll-behavor: smooth;
    }
     body {
        height: 3500px;
    }
    .back {
        position: fixed;
        bottom: 100px;
        right: 100px;
        display: none;
        width: 40px;
        height: 150px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        writing-mode: vertical-lr;
        background-color: #f00;
    }
</style>

<body>
    <div class="back">点击回到顶部</div>
    <script>
        var back = document.querySelector(".back");
        window.onscroll = function (){
            // 当卷入距离 > 500 出现回到顶部按钮
            if(window.pageYOffset > 500){
                back.style.display = "block";
            }else {
                back.style.display = "none";
            }
        }
        // 方法二
        back.onclick = function (){
            window.scroll({
                top: 0,
                behavior: "smooth"
            })
        }
    </script>
</body>

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: CSS