美文网首页
overscroll-behavior:contain设置子元素

overscroll-behavior:contain设置子元素

作者: keknei | 来源:发表于2021-08-13 10:38 被阅读0次

    最近看张鑫旭大神的博客,学习到了很多的新东西,尤其是css,很多以前需要费劲巴拉的写js能搞定的东西,现在一两行css就搞定了

    比如说一个常见的场景,有一个浮层,这个浮层可以滚动,但是呢,这个滚动的时候,或者滚动到底部的时候不能影响其他元素也滚动

    在比如说一个场景,子元素滚动到底部的时候,需要加载新的数据或者别的操作,不能让别的元素也跟着滚动

    上面的这两个场景就可以用到今天要说的cssoverscroll-behavior:contain;

    举个例子:
    html

    <div class="box">
        <div class="son">
          sdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjf
        </div>
        sdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjfsdfjkdskjf
     </div>
    

    css

    .box{
      height:100px;
      overflow:auto;
      width:150px;
      border:1px solid red;
      word-break: break-all;
    }
    .son{
      border:1px solid #000;
      margin:20px;
      height:100px;
      overflow:auto;
      overscroll-behavior:contain;
    }
    

    参考的文章https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/,请狠狠的点击我

    相关文章

      网友评论

          本文标题:overscroll-behavior:contain设置子元素

          本文链接:https://www.haomeiwen.com/subject/ecjdbltx.html