uniapp的scroll-view与overflow:hidden auto与长列表与滚动条--持续更新

最新推荐文章于 2024-06-14 11:32:01 发布

烟雨浥轻尘

最新推荐文章于 2024-06-14 11:32:01 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_41430522/article/details/114953836

版权

之前用过uniapp的scroll-view,不过没太大印象了,只记得挺好用的,现在一看以为是很厉害的东西,可以在一个限定高度的区域里,展示无限高度的内容,但是发现自己随便写个overflow:hidden auto;固定高度,里面内容随便写,其实就是普通的滚动条效果

这里让我记起之前工作中用scroll-view,内部的滚动条也有,然后全局这个页面又有个滚动条,当时这两个滚动条还冲突了,不记得怎么解决了,好像是隐藏了滚动条

一开始看到scroll-view,可以在一个滚定高度的区域里,放任意多高度的内容,觉得很厉害,后来发现,不过是overflow-y:auto

又看到scroll-view的滚动条竟然可以隐藏,觉得很厉害,后来发现,滚动条样式可以自己设置,设置成透明的或者直接display:none都行

这里有个注意的点,那就是滚动调样式直接::-webkit-scrollbar改的是全局的,如果前面加类名,那就是这个类所在元素的滚动条

还有个注意的点是,如果滚动条隐藏,用display: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>Document</title>
  <style>
    .a {
      height: 200px;
      border: 1px solid red;
      overflow: hidden auto;
    }

    p {
      height: 500px;
      background: blue;
    }

    .a::-webkit-scrollbar {
      /*滚动条整体样式*/
      /* width: 10px; */
      /*高宽分别对应横竖滚动条的尺寸*/
      /* height: 1px; */
      display: none;
    }

    .a::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      /* border-radius: 10px; */
      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); */
      /* background: #535353; */
      display: none;
    }

    .a::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      border-radius: 10px;
      /* background: #ededed; */
      background: rgba(0, 0, 0, 0);
      display: none;

    }
  </style>
</head>

<body>
  <div class="a">
    <p>adfsasdfasdf</p>
  </div>
</body>

</html>

这样就有了一个没有滚动条,固定高度的无限滚动区域,,感觉很炫酷

当然了scroll-view还是很棒的,毕竟是个组件,封装的很好,很好用,下拉刷新.锚点什么的等等,我这里这个代码只是做了个架子,没啥用

好像perfect-scrollbar 也是针对滚动条的插件,主要是解决滚动条的样式问题,和兼容问题,以及作为一个插件,它也有很多不错的功能

那么这里有两个做法

1.没有滚动条,固定高度的无限滚动区域 + 长列表优化

2.perfect-scrollbar好看的滚动条(其实滚动条样式本来自己就能写,如果你仅仅只是要该样式,没必要用这个,自己改下滚动条样式就行了) + 长列表优化

而关于长列表优化,不太了解

先留个坑,懂了再补

烟雨浥轻尘

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uniapp的scroll-view与overflow:hidden auto与长列表与滚动条--持续更新

之前用过uniapp的scroll-view,不过没太大印象了,只记得挺好用的,现在一看以为是很厉害的东西,可以在一个限定高度的区域里,展示无限高度的内容,但是发现自己随便写个overflow:hidden auto;固定高度,里面内容随便写,其实就是普通的滚动条效果这里让我记起之前工作中用scroll-view,内部的滚动条也有,然后全局这个页面又有个滚动条,当时这两个滚动条还冲突了,不记得怎么解决了,好像是隐藏了滚动条一开始看到scroll-view,可以在一个滚定高度的区域里,放任意多高.
复制链接

扫一扫