CSS overscroll-behavior-inline屬性用法及代碼示例

此屬性指定瀏覽器到達滾動區域的內聯方向邊界時的行為方式。

用法:

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

屬性值：

auto:它是默認值，過度滾動行為是正常的。
contain:它將默認行為應用於相應的元素，但會阻止底層元素的滾動鏈接。
none:它可以防止滾動鏈接和默認的過度滾動行為。

它可用於防止內聯過度滾動。考慮以下場景，其中存在兩個塊級元素，一個包含另一個。外塊和內塊都有各自的水平卷軸。默認情況下，當我們在內部塊內滾動並到達其邊界時，整個頁麵將開始滾動，這是必須避免的。通過在內部塊中使用 overscroll-behavior-inline 屬性，我們可以防止這種情況。

例：

HTML


<!DOCTYPE html>
<html>
  
<head>
    <title>overscroll behavior inline</title>
    <style>
        #outerbox {
            height:300px;
            width:3000px;
        }
  
        #innerbox {
            height:300px;
            width:400px;
            overflow:auto;
            position:relative;
            top:50px;
            left:50px;
            overscroll-behavior-inline:contain;
        }
  
        #content {
            height:100%;
            width:1500px;
            background-color:green;
        }
  
        p {
            padding:10px;
            background-color:rgba(255, 255, 255, 0.5);
            margin:0;
            width:360px;
            position:relative;
            top:10px;
            left:10px;
        }
    </style>
</head>
  
<body>
    <div id="outerbox">
        <div id="innerbox">
            <div id="content">
                <p>
                    GEEKS FOR GEEKS<br>This green block has 
                    overscroll-behavior-inline property,
                    inline overscrolling can be prevented here.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

輸出：

支持的瀏覽器：

Chrome 77.0 及以上
Edge 79.0 及以上
火狐 73.0 及以上
Opera 64.0 及以上

相關用法

注：本文由純淨天空篩選整理自kankshi25大神的英文原創作品 CSS overscroll-behavior-inline Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。