CSS实现虚拟列表

最新推荐文章于 2023-04-03 15:10:54 发布

Fx_cap

最新推荐文章于 2023-04-03 15:10:54 发布

阅读量489

点赞数

分类专栏：你做过哪些vue的优化？文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_56274171/article/details/125422054

版权

你做过哪些vue的优化？专栏收录该内容

8 篇文章 0 订阅

订阅专栏

content-visibility有三个属性值,分别为visibility、hidden、auto :

content-visibility:visibility,为默认值,没有任何效果,相当于没有添加,元素的渲染和往常一样
content-visibility:hidden,元素的子元素被隐藏
content-visibility:auto,视口的元素被显示

content-visibility:visibility与display:none的区别:

设置了display:none的元素及其子元素都不会被渲染
设置了content-visibility:visibility的元素的子元素不会被渲
设置了content-visibility:visibility,会产生滚动条抖动问题,这不是一个好的体验,使用 contain-intrinsic-size属性来解决这个问题

contain-intrinsic-size:控制由content-visibility制定的元素的自然大小,如果能够准确知道了设置content-vosobility:auto的元素在渲染状态下的高度,就设置为对应的高度,如果无法准确知道对应的高度,就可以填写一个大概的值

<style>
    .dad {
      width: 500px;
      background-color: pink;
    }
    .son {
      width: 400px;
      background-color: skyblue;
      content-visibility: auto;
      contain-intrinsic-size: 400px;
    }
  </style>
  <body>
    <div class="dad">
      <div class="son">
        银白的月光洒在地上，到处都有蟋蟀的凄切的叫声。夜的香气弥漫在空中，织成了一个柔软的网，把所有的景物都罩在里面。眼睛所接触到的都是罩上这个柔软的网的东西，任是一草一木，都不是象在白天里那样地现实了，它们都有着模糊、空幻的色彩，每一样都隐藏了它的细致之点，都保守着它的秘密，使人有一种如梦如幻的感觉。
        （巴金《家》）
        月光如银子，无处不可照及，山上竹篁在月光下变成了一片黑色。身边草丛中虫声繁密如落雨。间或不知道从什么地方，忽然会有一只草莺“落落落落嘘”啭着它的喉咙，不久之间，这小鸟儿又好象明白这是半夜，不应当那么吵闹，便仍然闭着那小小眼儿安睡了。
        （沈从文《边城》）
        他靠纱窗望出去。满天的星又密又忙，它们声息全无，而看来只觉得天上热闹。一梳月亮象形容未长成的女孩子，但见人已不羞缩，光明和轮廓都清新刻露，渐渐可烘衬夜景。小园草地里的小虫琐琐屑屑地在夜谈。不知哪里的蛙群齐心协力地干号，象声浪给火煮得发沸。几星萤火优游来去，不象飞行，象在厚密的空气里漂浮，月光不到的阴黑处，一点萤火忽明，象夏夜的一只微绿的小眼睛。
        （钱钟书《围城》）
      </div>
      ....包含了N个son
      <div class="son">
        银白的月光洒在地上，到处都有蟋蟀的凄切的叫声。夜的香气弥漫在空中，织成了一个柔软的网，把所有的景物都罩在里面。眼睛所接触到的都是罩上这个柔软的网的东西，任是一草一木，都不是象在白天里那样地现实了，它们都有着模糊、空幻的色彩，每一样都隐藏了它的细致之点，都保守着它的秘密，使人有一种如梦如幻的感觉。
        （巴金《家》）
        月光如银子，无处不可照及，山上竹篁在月光下变成了一片黑色。身边草丛中虫声繁密如落雨。间或不知道从什么地方，忽然会有一只草莺“落落落落嘘”啭着它的喉咙，不久之间，这小鸟儿又好象明白这是半夜，不应当那么吵闹，便仍然闭着那小小眼儿安睡了。
        （沈从文《边城》）
        他靠纱窗望出去。满天的星又密又忙，它们声息全无，而看来只觉得天上热闹。一梳月亮象形容未长成的女孩子，但见人已不羞缩，光明和轮廓都清新刻露，渐渐可烘衬夜景。小园草地里的小虫琐琐屑屑地在夜谈。不知哪里的蛙群齐心协力地干号，象声浪给火煮得发沸。几星萤火优游来去，不象飞行，象在厚密的空气里漂浮，月光不到的阴黑处，一点萤火忽明，象夏夜的一只微绿的小眼睛。
        （钱钟书《围城》）
      </div>
      <div>结束</div>
    </div>
  </body>