问答

管理系统一般怎么处理滚动条

作者:admin 2021-08-21 我要评论

遇到一个很纠结的问题,一般整个页面和Table组件需不需要显示滚动条呢,如果不显示滚动条的话,领导说了如果鼠标滚轮是坏的,怎么滚动页面,table也是。但是如果...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

遇到一个很纠结的问题,一般整个页面和Table组件需不需要显示滚动条呢,如果不显示滚动条的话,领导说了如果鼠标滚轮是坏的,怎么滚动页面,table也是。但是如果一直显示滚动条,感觉秀难看,table带滚动条,页面也带滚动条。

###

一般不做特殊处理。
windows系统都是自带滚动条的。
Mac的触控板那么强大,鼠标坏了就让它坏了呗。

一定要有滚动条,就自定义样式,写一个好看的,稍微透明的就行。

::-webkit-scrollbar-track-piece {
    background-color: #fff;
    opacity: 0.5;
}
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}
::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/ }
::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/}
::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/ }
###

滚动条是可以通过css控制进行隐藏的,这样页面既不会显示滚动条,也不影响功能
示例
使用CSS属性以及溢出实现下面一个实例——隐藏水平滚动条,同时允许垂直滚动条:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
###

一般不做处理,除非产品、甲方提需求

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器