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

先回答题目抛出的问题，一句话：

::scroll-button可以自定义上下或左右滚动按钮，::scroll-marker可以自定义切换按钮，用在CSS Scroll Snap交互场景下，以便实现完整的Carousel，Slider等交互效果。

一、一反常态，先上案例

先看::scroll-button()伪元素使用场景，可以模拟Scroll Snap上一项和下一项切换展示效果。

您可以狠狠地点击这里：CSS ::scroll-button实现slide左右切换demo

可以看到图片slider左右有切换按钮，点击的时候，图片就会左右滑动，非常的流畅，整个交互过程没有任何JS的参与。

如下MP4录屏所示（不动点击播放）：

其中还使用了锚点定位技术，有兴趣的可以参见“全新的CSS Anchor Positioning锚点定位API”这篇文章。

核心代码

其中，HTML结构比较简单：

<zxx-slide>
  <a href="###"><img src="ps1.jpg"></a>
  <a href="###"><img src="ps2.jpg"></a>
  <a href="###"><img src="ps3.jpg"></a>
  <a href="###"><img src="ps4.jpg"></a>
</zxx-slide>

CSS核心代码如下所示（完整代码访问demo获取）：

zxx-slide {
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  a {
    scroll-snap-align: start;
  }
}

zxx-slide::scroll-button(left) {
  content: "◄";
}

zxx-slide::scroll-button(right) {
  content: "►";
}
zxx-slide {
  anchor-name: --myCarousel;
}

zxx-slide::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}
zxx-slide::scroll-button(*) {
  align-self: anchor-center;
}
zxx-slide::scroll-button(left) {
  right: calc(anchor(left) - 45px);
}

zxx-slide::scroll-button(right) {
  left: calc(anchor(right) - 45px);
}

使用了很多CSS新特性，如果不是持续关注CSS的前端开发，上面的代码多半都已经不认识了。

::scroll-button()伪元素函数语法

支持的参数包括下面这些：

::scroll-button(*) {}
::scroll-button(left) {}
::scroll-button(up) {}
::scroll-button(right) {}
::scroll-button(down) {}
::scroll-button(block-end) {}
::scroll-button(block-start) {}
::scroll-button(inline-end) {}
::scroll-button(inline-start) {}

注意，垂直访问是up/down，而不是top/bottom。

常规的CSS属性都支持，因此，我们可以自如地对切换按钮进行样式自定义。

二、::scroll-marker使用案例

::scroll-marker的是要要更复杂些，需要和scroll-marker-group属性以及::scroll-marker-group伪元素配合使用。

还是通过案例快速上手吧。

您可以狠狠地点击这里：CSS ::scroll-marker实现slide序号切换demo

页面效果如下，点击下面的序号按钮，图片就会平滑滚动到对应的位置，如下截屏动画所示（不播放就“戳”一下）：

很赞，对不对？

核心代码

HTML和上面demo一样，主要看下CSS部分：

zxx-slide {
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-marker-group: after;

  a {
    scroll-snap-align: start;
    counter-increment: markers;

    &::scroll-marker {
      content: counter(markers);
      /*... */
    }
  }

  ::scroll-marker:target-current {
    background-color: #cd0000;
    color: white;
  }
}

::scroll-marker-group {
  display: flex;
  place-content: center;
}

这里出现了一个新的伪类:target-current，表示当选匹配的marker选项。

scroll-marker-group属性

scroll-marker-group属性的作用：控制包含::scroll-marker-group伪元素的滚动容器是否生成，如果生成，位置是前还是后。

使用示意：

/* 索引序号组在滚动容器前面 */
scroll-marker-group: before;
/* 索引序号组在滚动容器后面 */
scroll-marker-group: after;
/* 默认值，不显示索引序号组 */
scroll-marker-group: none;

::scroll-marker-group伪元素

::scroll-marker伪元素的父级容器元素，控制索引序号整体位置、样式用的。

具体使用参见上面的样式页面。

三、兼容性以及结语若干

本文介绍的这几个伪元素和CSS属性都需要Chrome 135+支持，是比较新的一个特性。

::column伪元素

::column伪元素也是同一时间支持的伪元素，也是用在CSS carousel 效果中的，和上面的区别在于，水平布局是使用columns布局实现。

此时，若还是按照本文的案例使用，则需要这么使用：

zxx-slide::column {
  scroll-snap-align: center;
}
zxx-slide::column::scroll-marker {
  content: "";
  /* 按钮样式... */
}
zxx-slide::column::scroll-marker:target-current {
  background-color: #cd0000;
}

具体不展开，因为columns布局用的人本就少，别说这个伪元素的。

使用::column的目的是不影响原本的columns布局。

最后，本文::scroll-button、::scroll-marker伪元素生成的交互按钮，天然支持无障碍访问，很棒！

好吧，就说这么多，又是学习的一天！

😉😊😇
🥰😍😘

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

（本篇完）