当前位置:首页 > 技术分析 > 正文内容

滚动条隐藏及美化_如何显示滚动条的显示与隐藏

ruisui884个月前 (03-02)技术分析19

1、滚动条隐藏

背景/场景:在移动端,滑动的时候,会显示默认滚动条,如图1:

//隐藏代码:  /*隐藏滚轮*/
.ul-scrool-box::-webkit-scrollbar,
.ul-scrool-box ul::-webkit-scrollbar {
  display: none;
}

2、滚动条美化

//美化代码---可以直接搬走:且一般只需要变动2处,变动地方1/2
/* 滚动条样式 */
	.task-scrollbarsl {
		padding-right: 10px;
		overflow-y: scroll;
	}

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

	.task-scrollbarsl::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(110,74,237,0.3);//为了和主题一直,变动地方1 
    //***#c1c1c1的话,和浏览器就一致了
		background: #fff;//修改成**#c1c1c1
    
	}

	.task-scrollbarsl::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2);//**#e8e8e8
		border-radius: 10px;
		background: rgba(110,74,237,0.7); //为了和主题一直,变动地方2 //**#e8e8e8
	}
	/* 滚动条美化end */

//** 的4处变动,是为了和浏览器的滚动条保持一致

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2393.html

分享给朋友:

“滚动条隐藏及美化_如何显示滚动条的显示与隐藏” 的相关文章

Vue.js 组件通信的 3 大妙招

在 Vue.js 中,组件化是其核心概念之一,允许你将复杂的界面拆分成多个独立的、可复用的组件。在构建大型应用时,如何高效地在组件之间传递数据和触发事件是非常重要的。Vue.js 提供了多种方式来处理组件间的通信,下面是最常用的 3 种方式:1.父子组件通信:通过 Props 和 Events在 V...

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用(组、权限、用户、项目)2 GitLab简介GitLab是整个DevOps生命周期...

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

Gemini应用在Android上广泛推出2.0闪电模式切换器

#头条精品计划# 快速导读谷歌(搜索)应用的测试频道在安卓设备的双子应用中推出了2.0闪电实验功能,现已向稳定用户开放。双子应用通过谷歌应用运行,目前推出的15.50版本中,用户可通过模型选择器体验不同选项,包括1.5专业版、1.5闪电版和2.0闪电实验版。2.0闪电实验模型提供了更快的响应速度和优...

基于 vue3.0 小程序拖拽定制

今天给大家分享一个使用Vue3编写的自由DIY小程序页面。mbDIY 一款基于vue3.x构建的可拖拽定制小程序模板。支持新建页面、自由拖拽模块、复制/移动、自定义模块样式等功能。整个项目分为页面、模块、控件三大部分。模块里面的组件可拖拽至主面板区,编辑后保存即可预览效果。快速安装# 克隆项目 gi...

vue.js 双向绑定如何理解,有什么好处!#云南小程序开发

Vue.js 的双向数据绑定是借助于 JavaScript 的一些特性,如对象的属性 getter 和 setter 以及 Vue 的依赖追踪系统实现的。简单来说,双向数据绑定就是数据与视图间的双向通信,也就是说数据的改变会马上反映到视图中,视图的改变也会立刻改变数据。具体来说,当你改变了数据时,视...