by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12442
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、一句话概述

scroll-axis-lock 是 CSS Overflow Module Level 5 的新属性，用来控制浏览器是否自动把滚动手势锁定到单一坐标轴。

什么意思呢？

就是说，scroll-axis-lock可以控制用户触摸/拖拽滚动时，是否忽略微小位移。

比方说一个既能水平滚动，又能垂直滚动的容器。

在默认的浏览器行为中，用户向下滚动的时候，毕竟是手动操作，水平方向难免会有微小的位置变化，此时，浏览器会触发轴锁定，会忽略水平方向的位移，让页面以一条直线的方式保持滚动。

这在常规的网页浏览中是极好的体验优化，可以避免手滑带来的斜向漂移。

但是，在地图、画布、大图查看器这类场景，用户就是需要斜向双轴同时滚动，这个默认行为就会干扰。

所以，就需要scroll-axis-lock:none来关闭这种单轴锁定。

我们可以通过下面的视频对比出两者的效果区别（点击播放）：

二、语法、兼容性以及其他

scroll-axis-lock属性的语法如下。

auto（初始默认值）

浏览器启用轴锁定启发规则。手势偏向某一轴时，会抹掉另一轴微小滚动量，只单轴滚动。

.scroller {
  scroll-axis-lock: auto;
}

none

关闭浏览器的轴锁定。允许同时水平+垂直双向滚动，不管手势角度，X、Y方向位移全部生效，不会被浏览器过滤掉另一轴增量。

.map-canvas {
  overflow: scroll;
  scroll-axis-lock: none;
}

兼容性

scroll-axis-lock是个非常新的CSS特性，目前只有Chrome浏览器支持，具体如下图所示：

不过，scroll-axis-lock属性本就是一个渐进增强的特性，因此，完全不影响我们在浏览器中使用。

浏览器支持体验更好，如果不支持，那就保持现状。

和overscroll-behavior的关系

overscroll-behavior属性也与滚动行为密切相关，只不过overscroll-behavior 控制滚动到边界之后的行为；scroll-axis-lock 控制滚动过程中是否过滤另一轴滚动增量。
以及scroll-axis-lock属性只作用于手势滚动（触摸、鼠标拖拽），不影响鼠标滚轮，滚轮不受这个属性控制。

overscroll-behavior属性也是比较实用的一个属性，可以关闭Mac系统下默认的滚动边界回弹行为，以及关闭滚动左滑到底后触发返回上一页的默认行为。

具体可以访问我之前这篇文章：CSS overscroll-behavior让滚动嵌套时父滚动不触发

三、哎呀，居然食言了

本以为上一篇文章是国庆节前最后一篇文章，结果这一篇才是。

因为八成的同事都请假了（可以连休13天），我一个人在公司，实在没有需求，那就写文章代替摸鱼吧，桀桀桀。

好了，其他就不多说了。

大家祝我国庆节继续爆护吧！

分享下最近一个月作钓鱼获。
图一：浦东梅林垂钓园，168六小时，约莫30斤不到点，大口鲶，昂刺鱼和红鲳
图二：浦东清水湾垂钓，120四小时，去的晚，约莫十七八斤，鲤鲫和鳊鱼
图三：浦东繁茂垂钓，238六小时，草鱼鳊鱼红鲳，约莫70斤
图四：嘉定痴渔户外营地垂钓，68元5小时，强回，最终57.6斤，差4两上岸
图五：奉贤兄弟垂钓，180五小时，回鱼3元每斤，最终72斤，上岸小盘
图六：青浦庆同钓场，198五小时，鱼获35斤多，大鳊鱼大板鲫

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12442

（本篇完）