View in EnglishAlways switch to English

scroll-margin-block-end

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.

scroll-margin-block-end 属性定义了滚动吸附区域在的块末外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

尝试一下

scroll-margin-block-end: 0;

scroll-margin-block-end: 20px;

scroll-margin-block-end: 2em;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>  </div>  <div>Scroll »</div></section>

.default-example .info {  inline-size: 100%;  padding: 0.5em 0;  font-size: 90%;  writing-mode: vertical-rl;}.scroller {  text-align: left;  height: 250px;  width: 270px;  overflow-y: scroll;  display: flex;  flex-direction: column;  box-sizing: border-box;  border: 1px solid black;  scroll-snap-type: y mandatory;}.scroller > div {  flex: 0 0 250px;  background-color: rebeccapurple;  color: #fff;  font-size: 30px;  display: flex;  align-items: center;  justify-content: center;  scroll-snap-align: end;}.scroller > div:nth-child(even) {  background-color: #fff;  color: rebeccapurple;}

语法

css

/* <length> 值 */scroll-margin-block-end: 10px;scroll-margin-block-end: 1em;/* 全局值 */scroll-margin-block-end: inherit;scroll-margin-block-end: initial;scroll-margin-block-end: revert;scroll-margin-block-end: revert-layer;scroll-margin-block-end: unset;