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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。