1. Web
  2. CSS
  3. scroll-margin-inline-start

scroll-margin-inline-start

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 2021 年 9 月起，所有瀏覽器均已支援此功能。

scroll-margin-inline-start 屬性定義了滾動捕捉區域在行內維度起始端的邊距，用於將此框捕捉到捕捉埠。滾動捕捉區域的確定方式是：獲取變換後的邊框，找到其矩形邊界框（在滾動容器的座標空間中軸對齊），然後新增指定的外部偏移。

試一試

scroll-margin-inline-start: 0;

scroll-margin-inline-start: 20px;

scroll-margin-inline-start: 2em;

<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

語法

css
/* <length> values */
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;

/* Global values */
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;

值

<length>

從滾動容器行內起始邊緣向外的偏移。

正式定義

初始值0
應用於所有元素
繼承性否
計算值同指定值
動畫型別按計算值型別

正式語法

scroll-margin-inline-start = 
  <length>

示例

基本演示

此示例實現了與上述互動式示例非常相似的功能，不同之處在於我們將在此處向您解釋其實現方式。

這裡的目標是建立四個水平滾動的塊，其中第二個和第三個塊能捕捉到位，接近但不完全位於每個塊的左側。

HTML

HTML 包含一個帶有四個子元素的滾動器

html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

讓我們瀏覽一下 CSS。外部容器的樣式如下

css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

與滾動吸附相關的主要部分是 overflow-x: scroll，它確保內容將滾動而不是被隱藏，以及 scroll-snap-type: x mandatory，它規定滾動吸附必須沿水平軸發生，並且滾動將始終停在吸附點上。

子元素的樣式如下

css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: white;
  color: rebeccapurple;
}

最相關的部分是 scroll-snap-align: start，它指定了左側邊緣（在本例中是沿 x 軸的“起點”）為指定的捕捉點。

最後，我們為第二個和第三個子元素指定了不同的滾動邊距值。

css
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}

這意味著當滾動經過中間的子元素時，滾動會捕捉到第二個 <div> 的行內起始邊緣之外 1rem 處，以及第三個 <div> 的行內起始邊緣之外 2rem 處。

結果

自己嘗試一下

規範

規範
CSS 滾動捕捉模組級別 1
# margin-longhands-logical

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.