CSS中滚动和点击相关属性

Posted 2022-08-18 公众号_前端每日技巧

scroll-behavior

​​scroll-behavior​​用于页面平滑滚动，初始值auto，我们一般在滚动容器元素上使用scroll-behavior：smooth，让容器的滚动变得平滑。

scroll-behavior: smooth;
overflow: hidden;

overscroll-behavior

​​overscroll-behavior​​​属性可以设置dom元素滚动到边缘时的行为，语法为​​overscroll-behavior: [contain | none | auto] 1,2​​​。默认值为​​auto​​​表示为我们默认看到的滚动行为，意思就是滚动条滚动到边缘后继续滚动外部的可滚动容器。​​contain​​​默认的滚动溢出行为只会表现在当前元素的内部，比如刷新或者反弹的这种效果，不会对相邻的滚动区域进行滚动，比如浮动滚动，底层元素不会滚动。​​none​​​的意思相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。​​contain​​​和​​none​​的行为差异主要体现在移动端。

overscroll-behavior: contain;
overscroll-behavior: auto;
overscroll-behavior: none;

也可以使用多个值混合使用：

overscroll-behavior: auto contain;

scroll-snap

​​scroll-snap​​​作用可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置。其中scroll-​​snap-type​​​属性的作用是确定定位方向是水平滚动定位还是垂直滚动定位。接收的属性值也比较多，其中​​none​​​为默认值，表示滚动时忽略捕捉点，就是我们平时所使用到的滚动。​​x​​​表示捕捉水平定位点。​​y​​​表示捕捉垂直平定位点。​​block​​​表示捕捉和块状元素排列一个滚动方向的定位点，默认文档流下指的是垂直轴。​​inline​​​表示的是捕捉和内联元素排列一个滚动方向的定位点，默认文档流下指的就是水平轴。​​both​​​表示的是横轴和纵轴都会捕捉。​​mandatory​​​表示强制，为可选参数，强制进行定位，也就是说如果有效的定位点位置，则滚动容器必须在滚动结束时进行定位。​​proximity​​​表示大约，也为可选参数，强制进行定位，也就是说如果存在有效的定位点值，这个值的作用是让浏览器自己判断要不要定位。​​mandatory​​​和​​proximity​​两者效果只有在浏览器滚动容器的窗口尺子比子元素的尺寸还要小的时候，它们的差异才会体现出来。

scroll-snap-align

​​scroll-snap-align​​​作用是在滚动容器子元素上，表示捕获点是上边缘、下边缘或者中间位置。支持多个属性值。默认值​​none​​​，意思是不定义位置。​​start​​​表示的是起始位置对齐，常用于垂直滚动、子元素和容器同上边缘对齐。​​end​​​表示的是结束位置对齐。常用于垂直滚动、子元素和容器同下边缘对齐。​​center​​表示的是居中对齐，子元素中心和滚动容器中心一致。还支持多个属性值混合使用。

scroll-snap-align: start end;
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;

point-events

​​point-events​​​的作用可以让元素无视点击、鼠标悬停和拖拽行为。但是不建议用来禁用按钮。所以​​point-events:none​​不适合链接、按钮等控件元素，而适合作用在装饰性或仅用作视觉表现的非控件元素上，比如一些覆盖元素不影响下层元素正常的操作。

<button class="warpper"></button>
<style>
    .warpper.disabled 
        point-events: none;
    
</style>

其中​​point-events: none​​​不能阻止键盘行为，按钮元素依然可以通过tab键被focus聚焦，并且可以在focus聚焦状态下通过enter键触发点击事件，就是我们用​​point-events: none​​​并不是真正意义的禁用，而只是实现了部分禁用效果。​​point-events:none​​​也就影响无障碍访问，比如我们在按钮禁用的时候，可以通过title属性或其他提示组件在鼠标指针悬停在按钮上时显示禁用的原因。如果我们设置了，则不会显示这些提示效果。在移动端时如果我们设置了该属性，那么移动端无障碍阅读是通过触摸触发的将会被影响识别效果。所以对于按钮效果，我们设置禁用最好使用的方法就是原生的​​disabled​​​属性，然后配合​​:disabled​​伪类实现。

​​point-events​​​属性具有继承性，当我们父元素和子元素都设置了​​point-events​​​属性值，那么子元素的​​point-events​​​属性会覆盖祖先元素的​​point-events​​​属性值。除了​​none​​​还有其他属性值。除了auto和none这两个关键字，其他关键字都是用于svg元素上的。​​visible​​​只要元素显示，任意描边或填充区域都可以响应鼠标事件。​​visiblePainted​​​作用是只要肉眼可见的有描边或有填充的地方都可以响应鼠标事件。​​visibleFill​​​作用是鼠标指针经过svg元素的描边区域不会有任何鼠标响应事件发生。​​painted​​​作用是可以影响鼠标事件的，比如点击或者悬停效果。​​fill​​​作用是鼠标一样可以点击填充区域，关键字不需要svg元素的visibility计算值是visible，就算visibility计算值是hidden。​​stroke​​​描边区域也能响应鼠标事件，填充区域则不能响应鼠标事件。​​all​​​和painted关键字区别在于，​​painted​​关键字需要fill或者stroke的属性值不是none，而all关键字没有这个限制。

point-events: auto;
    point-events: visible;
    point-events: fill;