css设置始终显示滚动条

在需要设置滚动的元素上设置如下

下面以垂直方向滚动为例，父元素为ul，需要先设置高度。

ul{height: 260px;overflow-y: scroll;overflow-x: hidden;
}
ul::-webkit-scrollbar { /* 隐藏默认的滚动条 */-webkit-appearance: none;
}
ul::-webkit-scrollbar:vertical { /* 设置垂直滚动条宽度 */width: 2px;
}/* 这里不需要用到这个 */
ul::-webkit-scrollbar:horizontal{/* 设置水平滚动条厚度 */height: 2px;
}ul::-webkit-scrollbar-thumb { /* 滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条 */border-radius: 8px; border: 2px solid rgba(255,255,255,.4); background-color: rgba(0, 0, 0, .5);
}

css设置始终显示滚动条相关推荐

html文本框不显示滚动条,html怎么设置不显示滚动条
html设置不显示滚动条的方法:首先新建一个HTML代码页面:然后在html代码页面上创建div:接着设置scroll-box.scroll类样式:最后给scroll-box设置一个高度和内容超出后隐 ...
css设置文本显示高度隐藏超出部分
通过height属性设置文本元素的显示高度,通过overflow属性设置文本元素超出高度时显示隐藏. overflow 属性规定当内容溢出元素框时发生的事情.当元素值设置为hidden是就会隐藏超出的 ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色？
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scroll ...
Mac中如何始终显示滚动条
PS:较新版Mac中滚动条是全局设置的,我也是在查询如何召唤Excel中的滚动条发现的. PSS:我的版本是「macOS Big Sur 11.2.3」. STEP1:系统偏好设置 STEP2:通用, ...
设置iframe显示滚动条
<iframe src='' id='' scrolling='auto' frameborder='0'></iframe> 把scrolling设置为auto就行了设置成 ...
css 设置overflow:scroll 滚动条的样式
/* 定义滚动条样式 */ ::-webkit-scrollbar {width: 6px;height: 6px;background-color: rgba(240, 240, 240, 1); ...
小程序css 文字居中,小程序css设置垂直居中显示
有2种方式设置一个容器的元素垂直居中: 第1种 .container { position: absolute; top: 50%; left: 50%; transform: translate(- ...
css鼠标移入显示滚动条
.database是元素的类选择器名称 .database::-webkit-scrollbar {/*这里写滚动条宽度*/width: 6px; } .database:hover::-webkit ...

css设置始终显示滚动条

css设置始终显示滚动条相关推荐

最新文章

热门文章