浏览器滚动相关css属性

scroll-snap

1 .简介:网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置.主要效果在最后的位置,不管滑动的平滑效果
2 .如下代码

.scroll{
            overflow: auto;
            scroll-snap-type: y mandatory;
//表示y轴方向的滚动检测
            width: 300px;
            height: 150px;
        }
.item{
            width: 300;
            height: 150px;
            background-color: bisque;
            scroll-snap-align: center;
        }
//可以实现大屏滚动效果,只要你对这里发生了滑动,他一定会滚动下一个完整的,不会是两个都只显示一半
https://www.zhangxinxu.com/study/202203/css-snap-scroll-swipe-demo.php

3 .页面滚动停留在你希望用户关注的重点区域.有点自动吸附的感觉,无需js检测边界属性
4 .父元素属性

1 .scroll-snap-type:表示滚动的检测方向.水平滚动定位，还是垂直滚动定位
2 .scroll-snap-stop:是否允许滚动容器忽略捕获位置(可以保证我们每次只能滚动一屏，或者一个指定元素，而不会一下子滚多屏或多个元素，只可惜，根据我的测试，还没有浏览器支持)

5 .字元素属性

1 .scroll-snap-align:作用在滚动容器子元素上的，表示捕获点是上边缘，下边缘，还是中间位置
start:起始位置对齐，例如，垂直滚动，子元素和容器同上边缘对齐
center:中间位置对齐，例如，垂直滚动，子元素和容器中间边缘对齐
end:结束位置对齐，例如，垂直滚动，子元素和容器同下边缘对齐

6 .相关检测事件的添加.停止滚动

// 定时器，用来检测水平滚动是否结束
var timer = null;
// 滚动事件开始
container.addEventListener('scroll', function () {
    clearTimeout(timer);
    // 重新新的定时器
    timer = setTimeout(function () {
        // 无滚动事件触发，认为停止滚动了
        // ... 做你想做的事情，如回调处理
    }, 100);
});

scroll-behaviour

1 .滚动容器出现锚点定位，或者 JS 设置 scrollLeft/scrollTop 滚动距离时候表现为平滑定位.凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！

html, body { scroll-behavior:smooth; }

2 .如果我操作的是transform这种的话是不行的.因为这个不支持.需要自己加js

 .label {
            width: 100px;
            margin-right: -1px;
            border: 1px solid #ccc; border-bottom: 0;
            padding-top: 5px; padding-bottom: 5px;
            background-color: #eee;
            text-align: center;
            float: left;
        }
        .box { 
            height: 200px; 
            border: 1px solid #ccc; 
            scroll-behavior: smooth; 
            overflow: hidden; 
        }
        .content { 
            height: 100%; 
            padding: 0 20px; 
            position: relative; 
            overflow: hidden;
            background-color: antiquewhite;
        }
        .box input { 
            position: absolute; top:0; 
            height: 100%; width: 1px;
            border:0; padding: 0; margin: 0;
            clip: rect(0 0 0 0);
        }
<div class="tab">
        <label class="label" for="tab1">选项卡1</label>
        <label class="label" for="tab2">选项卡2</label>
        <label class="label" for="tab3">选项卡3</label>
    </div>
    <div class="box">
        <div class="content"><input id="tab1">
            <p>我是选项卡1对应的美女</p>
        </div>
        <div class="content"><input id="tab2">
            <p>我是选项卡2对应的美女</p>
        </div>
        <div class="content"><input id="tab3">
            <p>我是选项卡3对应的美女</p>
        </div>
    </div>

3 .平滑滚动的js算法

/**
 @description 页面垂直平滑滚动到指定滚动高度
 @author zhangxinxu(.com)
*/
var scrollSmoothTo = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            return setTimeout(callback, 17);
        };
    }
    // 当前滚动高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滚动step方法
    var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};

4 .滚动到顶部:document.links[0].scrollIntoView()

接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见
1 .可以对任意一个对象调用这个方法,让他出现在视野内.
2 .不过主要是很长的页面滑动
3 .DOM元素的scrollIntoView()方法是一个IE6浏览器也支持的原生JS API，可以让元素进入视区，通过触发滚动容器的定位实现

5 .这个并不是我想要的鼠标滚动的时候的稳定滑动效果,而是点击操作的

经验总结1

1 .参考better-scroll库可以发现,要想实现平滑的滚动,一定是变化的值的间隔要小,他那个是1px,变化,但是浏览器原生的不是,这样,最小可能是5px,看起来就是很丝滑

overscroll-behaviour

1 .属性可以让滚动嵌套时父滚动不触发，比方说弹框中的滚动滚到底部的时候，背后的页面会纹丝不动。比如当前鼠标hover的div内部有滚动,但是整个页面也是有滚动,这个属性可以让滚动只发生在子元素.就算子元素滚动到底部,在发生滚动,父元素也是不动的.
2 .overscroll-behavior: contain;

overflow-anchor

0 .就是图片很多的时候，例如漫画网站，尤其是条漫，在手机端，垂直布局这种，如果上方的图片加载慢，那么下方的图片看着看着就会被推下来，然后自己又要重新去滚动定位
1 .上面有些漫画图片还没加载好，你已经看到后面，此时，如果上面的图片加载正常，高度撑高，则当前你看的漫画位置会纹丝不动，不会被推下来
2 .overflow-anchor:none.新append属性,会改变滚动条的位置,会显示新出现的元素.
3 .好像搞反了.默认的时候,新加一些元素,只会增加滚动条位置,不会显示新的内容,例如点击下方的一个按钮，会在上方append一些数据，此时，用户希望的是append的数据内容吧下方的按钮推开，优先展示内容，此时，滚动锚定反而拖了后腿，禁止滚动锚定反而是更好的做法。

scrollbr-width(只能用在火狐浏览器)

1 .自定义滚动条的宽度,只有17px,px两个值
2 .-webkit-scrollbar(chrome)用这个属性

浏览器滚动条自定义

1 .滚动条整体部分:和正常的div元素一样,可以添加属性

::-webkit-scrollbar              {
            width: 10px;
            height: 100%;
            background-color: rgb(255, 255, 255);
            border:1px solid #eee;
            border-radius:5px;
        }

2 .::-webkit-scrollbar-button 滚动条两端的按钮.可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果

3 .::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果

4 .::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去），这个不太常用，指未被滚动的区域

5 .::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分

6 .::-webkit-scrollbar-corner 边角:这个看不出来效果啊

7 .::-webkit-resizer 定义右下角拖动块的样式(基本不用)

image.png
image.png

8 .总结:感觉只需要3,4,5,多了反而更加拉跨了.根本不会有人点2来滑动滚动条吧

scroll-color

1 .滑动条颜色,也是只有火狐支持

scrollbar-gutter

1 .界面出现滚动条的时候,页面布局是稳定的.不会出现重新布局的闪动
2 .https://www.cnblogs.com/xiahj/p/8036419.html
3 .scrollbar-gutter: auto;
4 .scrollbar-gutter: stable; 一开始预留右边滚动框的距离,出现也不会导致布局有问题.只是右边会预留位置
5 .scrollbar-gutter: stable both-edges; 左右两边都预留位置,一起居中显示

overflow-scrolling

1 .iso私有属性,默认都有,自带回弹

pointer-events:none

1 .提高页面滚动时候的绘制性能
2 .pointer-events:none

1 .幻影特性,让元素实体虚化.
2 .一个使用了pointer-events:none的按钮元素,则我们再页面上看到这个按钮,只是一个虚幻的影子而已,可以理解为海市蜃楼,幽灵的躯体.我们在界面上看到这个按钮,当用鼠标数默的时候,会穿过去,不会试图检测触发相关的事件
3 .比如鼠标发起的光标移动或对象选择等
4 .如果我们在body标签上应用该CSS声明，则整个页面（如果内部没有其他pointer-events设置）就像是一个背景图片的存在。不能选不能点不能相应hover，幻影而已

3 .结论:pointer-events:none提高页面滚动时候的绘制性能是不准确的

1 .Chrome浏览器不是傻子，不会考虑hover重绘与滚动的性能优化
2 .现在用FireFox打开demo页面，鼠标位置放在任意图片上，不移动，单纯滚动鼠标轮子。当你鼠标停止，你会明显看到一定延迟时间后，hover效果才呈现。这不就是pointer-events:none要实现的状态
3 .pointer-events:none影响触屏设备的滚动
4 .几乎所有现代浏览器天然具有“快速滚动hover绘制的性能保护”。

衡量指标

image.png