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

一、温故而知新

在学习本文的scroll-state容器滚动查询之前，大家需要先了解CSS @container容器查询。

详见我之前的文章：“介绍2022年最期待的CSS container容器查询”。

这东西可以检测容器尺寸，并进行响应的布局调整，很强大。

现在，@container容器查询，再次进化，可以识别滚动边缘，让CSS的交互能力更上一层楼。

二、scroll-state容器滚动查询

学习一个新特性最快的方法就是案例。

需求这样的，一段文本，需要用户滚动到底部，提交按钮的禁用样式才会取消。

则我们可以这么处理，HTML如下所示：

<div class="container">
  <p>作者</p>
  <p>zhangxinxu</p>
  ...
  <p>作者</p>
  <p>zhangxinxu</p>
  <footer>
    <button>提交</button>
  </footer>
</div>

CSS如下所示（已省略部分无关键要的代码）：

.container {
  height: 300px;
  border: 1px solid;
  container-type: scroll-state;
  overflow: auto;
  /* 底部黏性定位 */
  footer {
    background: #f6f6f6;
    position: sticky;
    bottom: 0;
    text-align: center;
  }
  button {
    width: 100px;
    height: 32px;
    border-radius: 12px;
    background-color: crimson;
    color: white;
    cursor: pointer;
  }
}
@container scroll-state(scrollable: bottom) {
  /* 如果容器可以滚动，则按钮样式禁用 */
  button {
    filter: grayscale(1);
    opacity: .35;
  }
}

实时渲染效果如下所示（Chrome 133+ 浏览器有效果）：

或者参考下面的GIF动图演示效果：

如何使用？

第一步

给滚动容器设置 container-type: scroll-state CSS声明。

第二步

使用@container容器查询判断滚动容器是否可以上下滚动，并进行对应的CSS样式设置。

就这么简单！

三、scroll-state查询语法

scroll-state()查询函数支持下面三种类型：

• scrollable

  当前容器是否可以可滚动（滚动边缘）。

• snap

  是否滚动到Snap边缘

• stuck

  查询位置值为sticky的容器是否粘在其滚动容器祖先的边缘。

我觉得这三种都还是挺实用的。

方向值

scrollable是最常用的，我们使用scrollable参数介绍下方位值。

scroll-state(scrollable: value)

其中，value可以是（示意三种类型）：

• top: 上边缘。
• inline-end: 内联方向边缘，默认是水平方向。
• y: 垂直方向边缘。

我们用的比较多的就是 top 和 bottom 了。

四、兼容性以及渔获展示

目前滚动容器查询Chrome浏览器支持，兼容性如下图所示：

目前还无法大规模使用。

—-

上周末继续探钓。

周六，先是奉贤龙泉钓场，混养塘新塘新水，150元6小时，前三个小时钓法不对路，等于空军，后面三个小时散炮打浮，钓了接近30斤鱼，其中三条花鲢（当场回塘），成功挽尊。
周日去了浦东航头镇的航盛钓场，138元6小时，钓下来都是工程鲫，全场就我一个人，结果口还不错，提前收杆的情况下47斤，成功上岸盘老板。

😉😊😇
🥰😍😘

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

（本篇完）