CSS系列007-浏览器滚动溢出问题

最新推荐文章于 2024-08-26 14:18:59 发布

寒冰1307

最新推荐文章于 2024-08-26 14:18:59 发布

阅读量282

点赞数

分类专栏： CSS案例文章标签： css html css3

本文链接：https://blog.csdn.net/hanbing1307/article/details/129658077

版权

overscroll-behavior-x:这个css属性用来控制当滚动到区域的水平边界时的浏览器行为

取值:

- auto:默认的滚动溢出行为表现的和正常一样

- contain:默认的滚动溢出行为将被内部的元素观察到，但相邻的区域不会产生连续滚动效果

- none:相邻的滚动区域不会有连续滚动效果，且默认的滚动溢出行为会被阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器滚动溢出问题</title>
    <style>
        .a1{
            overflow-x: scroll;
            width: 200px;
            height: 200px;
            margin: 0px;
            overscroll-behavior-x:auto;
        }
        .a2{
            overflow-x: scroll;
            width: 200px;
            height: 200px;
            margin: 0px;
            overscroll-behavior-x:contain;