39-scroll相关属性和缓动动画

共计 9762 个字符，预计需要花费 25 分钟才能阅读完成。

当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）

39-scroll 相关属性和缓动动画

如果你需要做滚动监听，可以使用这个方法。

我们来看看和 scroll 相关的有哪些属性。

ScrollWidth 和 scrollHeight：获取元素 整个滚动区域 的宽、高。包括 width 和 padding，不包括 border 和 margin。

注意：

scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 3px;
            border: 8px solid red;
        }
    </style>
</head>
<body>

<div class="box">
    静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。</div>
<script>

    var div = document.getElementsByTagName("div")[0];

    // `scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight` 为内容的高（包括超出的内容）；如果不超出，`scrollHeight` 为盒子本身的高度。//IE8 以下（不包括 IE8），为盒子本身内容的高度。console.log(div.scrollWidth);
    console.log(div.scrollHeight);

</script>
</body>
</html>

打印结果：

39-scroll 相关属性和缓动动画

scrollLeft：获取水平滚动条滚动的距离。
scrollTop：获取垂直滚动条滚动的距离。

实战经验：

当某个元素满足 scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条滚动到底了。

当某个元素满足 scrollWidth - scrollLeft == clientWidth 时，说明水平滚动条滚动到底了。

这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。

如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。

（1）如果文档没有 DTD 声明，写法为：

    document.body.scrollTop

在没有 DTD 声明的情况下，要求是这种写法，chrome 浏览器才能认出来。

（2）如果文档有 DTD 声明，写法为：

   document.documentElement.scrollTop

在有 DTD 声明的情况下，要求是这种写法，IE6、7、8 才能认出来。

综合上面这两个，就诞生了一种兼容性的写法：

    document.body.scrollTop || document.documentElement.scrollTop // 方式一

    document.body.scrollTop + document.documentElement.scrollTop  // 方式二

另外还有一种兼容性的写法：window.pageYOffset 和 window.pageXOffset。这种写法无视 DTD 的声明。这种写法支持的浏览器版本是：火狐 / 谷歌 /ie9+。

综合上面的几种写法，为了兼容，不管有没有 DTD，最终版的兼容性写法：

    window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

方法如下：

    document.compatMode === "CSS1Compat"   // 已声明
    document.compatMode === "BackCompat"   // 未声明

这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫 scroll()，返回值为一个对象。以后就直接调用 scroll().top 和 scroll().left 就好。

代码实现：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 6000px;
            width: 5000px;
        }
    </style>
</head>
<body>

<script>

    // 需求：封装一个兼容的 scroll(). 返回的是对象，用 scroll().top 获取 scrollTop，用 scroll().left 获取 scrollLeft

    window.onscroll = function () {//        var myScroll = scroll();
//        myScroll.top;
        console.log(scroll().top);
        console.log(scroll().left);
    }

    // 函数封装（简单封装，实际工作使用）function scroll() {
        return { // 此函数的返回值是对象
            left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            right: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
</body>
</html>

上方代码中，函数定义的那部分就是要封装的代码。

另外还有一种比较麻烦的封装方式：（仅供参考）

function scroll() {  // 开始封装自己的 scrollTop
    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明 DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

获取 title、body、head、html 标签的方法如下：

document.title 文档标题；
document.head 文档的头标签
document.body 文档的 body 标签；
document.documentElement（这个很重要）。

document.documentElement表示文档的 html 标签。也就是说，基本结构当中的 html 标签 而是通过 document.documentElement 访问的，并不是通过 document.html 去访问的。

完整版代码实现：

（1）index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {vertical-align: top;}

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        #Q-nav1 {overflow: hidden;}

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!-- 引入工具 js-->
    <script src="tools.js"></script>
    <script>
        window.onload = function () {
            // 需求 1：当我们滚动界面的时候，被卷曲的头部如果超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            // 需求 2：当我们滚动界面的时候，被卷曲的头部如果小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed

            //1. 老三步。var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function () {
                //2. 判断，被卷曲的头部的大小
                if (scroll().top > height) {
                    //3. 满足条件添加类，否则删除类
                    middle.className += " fixed";
                    // 第二个盒子也要占位置，为了避免重叠，我们给第三个盒子一个上 padding 的空间，把这个空间留给第二个盒子
                    main.style.paddingTop = middle.offsetHeight + "px";
                } else {
                    middle.className = "";
                    // 清零
                    main.style.paddingTop = 0;
                }
            }

        }
    </script>
</head>
<body>
<div class="top" id="top">
    <img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
    <img src="images/main.png" alt=""/>
</div>
</body>
</html>

上方代码中，有一个技巧：

main.style.paddingTop = middle.offsetHeight + "px";

仔细看注释就好。

（2）tools.js：

/**
 * Created by smyhvae on 2018/02/03.
 */
function scroll() {  // 开始封装自己的 scrollTop
    if (window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if (document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明 DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

实现效果：

39-scroll 相关属性和缓动动画

~ 工程文件~：

2018-02-03-scrollTop 固定导航栏.rar
下载链接暂无。

缓慢动画里，我们要用到三个函数，这里先列出来：

Math.ceil() 向上取整
Math.floor() 向下取整
Math.round(); 四舍五入

缓动动画的原理就是：在移动的过程中，步长越来越小。

设置步长为：目标位置和盒子当前位置的十分之一。用公式表达，即：

    盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button> 运动到 left = 400px</button>
<div></div>

<script>

    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];

    btn.onclick = function () {setInterval(function () {
            // 动画原理：盒子未来的位置 = 盒子当前的位置 + 步长
            div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
        }, 30);
    }

</script>
</body>
</html>

效果：

39-scroll 相关属性和缓动动画

我们发现一个问题，上图中的盒子最终并没有到达 400px 的位置，而是只到了 396.04px 就停住了：

39-scroll 相关属性和缓动动画

原因是：JS 在取整的运算时，进行了四舍五入。

我们把打印 396.04px 这个 left 值打印出来看看：

39-scroll 相关属性和缓动动画

我么发现，通过 div.style.left 获取的值是精确的，通过 div.offsetLeft 获取的 left 值会进行四舍五入。

此时，我们就要用到取整的函数了。

通过对缓动动画进行封装，完整版的代码实现如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button> 运动到 200</button>
<button> 运动到 400</button>
<div></div>

<script>

    var btn = document.getElementsByTagName("button");
    var div = document.getElementsByTagName("div")[0];

    btn[0].onclick = function () {animate(div, 200);
    }

    btn[1].onclick = function () {animate(div, 400);
    }

    // 缓动动画封装
    function animate(ele, target) {
        // 要用定时器，先清定时器
        // 一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        // 定义定时器
        ele.timer = setInterval(function () {
            // 获取步长
            // 步长应该是越来越小的，缓动的算法。var step = (target - ele.offsetLeft) / 10;
            // 对步长进行二次加工(大于 0 向上取整, 小于 0 向下取整)
            // 达到的效果是：最后 10 像素的时候都是 1 像素 1 像素的向目标位置移动，就能够到达指定位置。step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // 动画原理：目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            console.log(step);
            // 检测缓动动画有没有停止
            console.log("smyhvae");
            if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
                // 处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        }, 30);
    }

</script>
</body>
</html>

实现效果：

39-scroll 相关属性和缓动动画

（1）index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }

        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="tools.js"></script>
    <script>
        window.onload = function () {
            // 需求：被卷去的头部超过 100 显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。// 难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。//      技术点：window.scrollTo(x,y); 浏览器显示区域跳转到指定的坐标
            // 步骤：//1. 老三步
            var img = document.getElementsByTagName("img")[0];
            window.onscroll = function () {
                // 被卷去的距离大于 200 显示小火箭，否则隐藏
                //2. 显示隐藏小火箭
                if (scroll().top > 1000) {img.style.display = "block";} else {img.style.display = "none";}
                // 每次移动滚动条的时候都给 leader 赋值，模拟 leader 获取距离顶部的距离
                leader = scroll().top;}
            //3. 缓动跳转到页面最顶端（利用我们的缓动动画）var timer = null;
            var target = 0; // 目标位置
            var leader = 0; // 显示区域自身的位置
            img.onclick = function () {// 技术点：window.scrollTo(0,0);
                // 要用定时器，先清定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    // 获取步长
                    var step = (target - leader) / 10;
                    // 二次处理步长
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step; // 往上移动的过程中，step 是负数。当前位置减去步长，就等于下一步的位置。// 显示区域移动
                    window.scrollTo(0, leader);
                    // 清除定时器
                    if (leader === 0) {clearInterval(timer);
                    }
                }, 25);
            }
        }
    </script>
</head>
<body>
<img src="images/Top.jpg"/>
<div>
    我是最顶端.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>
    生命壹号，永不止步.....<br>

</div>
</body>
</html>

（2）tools.js:

/**
 * Created by smyhvae on 2015/12/8.
 */

// 函数：获取 scrollTop 和 scrollLeft 的值
function scroll() {  // 开始封装自己的 scrollTop
    if (window.pageYOffset != null) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if (document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明 DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

实现效果：

39-scroll 相关属性和缓动动画

小火箭的图片资源：

39-scroll 相关属性和缓动动画

39-scroll相关属性和缓动动画

scroll 相关属性

window.onscroll() 方法

1、ScrollWidth 和 scrollHeight

2、scrollTop 和 scrollLeft

scrollTop 的兼容性

判断是否已经 DTD 声明

将 scrollTop 和 scrollLeft 进行封装

获取 html 文档的方法

scrollTop 举例：固定导航栏

缓动动画

三个函数

缓动动画的原理

缓慢动画的封装（解决四舍五入的问题）

window.scrollTo()方法举例：返回到顶部小火箭

WordPress3 和 jQuery（二）

CSS3新增属性(15个案例代码效果图素材)

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

一文彻底搞定MySQL中的JSON类型，效率飞起。

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

39-scroll相关属性和缓动动画

scroll 相关属性

window.onscroll() 方法

1、ScrollWidth 和 scrollHeight

2、scrollTop 和 scrollLeft

scrollTop 的兼容性

判断是否已经 DTD 声明

将 scrollTop 和 scrollLeft 进行封装

获取 html 文档的方法

scrollTop 举例：固定导航栏

缓动动画

三个函数

缓动动画的原理

缓慢动画的封装（解决四舍五入的问题）

window.scrollTo()方法举例：返回到顶部小火箭

WordPress3 和 jQuery（二）

CSS3新增属性(15个案例 代码 效果图 素材)

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

一文彻底搞定MySQL中的JSON类型，效率飞起。

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

CSS3新增属性(15个案例代码效果图素材)