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
网友评论