CSS overscroll-behavior-inline 属性

overscroll-behavior-inline 属性是用来定义元素在行内滚动时超出边界时的滚动行为。当用户在水平方向上滚动时，该属性仅对父容器内联（inline）方向上的滚动起作用。

在 CSS 2.1 中，滚动区域默认会继承父元素的滚动行为。而 CSS overscroll-behavior-inline 属性则可以重写该行为。

语法

overscroll-behavior-inline: auto | contain | none;

• auto：默认值。滚动行为由父容器继承。
• contain：在元素内滚动时，使滚动在元素内部产生。
• none：在元素内滚动时，元素外的滚动会被忽略。

示例

以下代码演示了一个简单的 overscroll-behavior-inline 属性应用实例：

<style>
  .container {
    width: 200px;
    overflow-x: scroll;
    overscroll-behavior-inline: contain;
    white-space: nowrap;
  }

  .item {
    display: inline-block;
    padding: 10px;
    background-color: lightgray;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

其中，.container 用来设置滚动容器的样式，.item 则用来设置内容块的样式。在滚动 .container 元素时，.item 元素会在 .container 元素内部滚动，而外部滚动则会被忽略。

以上便是 CSS overscroll-behavior-inline 属性 的介绍和示例，希望对大家有所帮助！