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

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

ruisui882个月前 (03-02)技术分析14

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

分享给朋友:

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

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能需要几个月的时间。这里有十个技巧可以帮助你在学习使用 Vim 时提高效率。1. 通过提高按键重复率来...

2024年,不断突破的一年

迈凯伦F1车队不久前拿下了2024年度总冠军,距离上一次还是二十几年前。在此期间,另一领域内,一个充满革新活力的腕表品牌——RICHARD MILLE理查米尔,正不断发展,与F1运动、帆船、古董车展等领域,共享着对速度与极限的无尽向往。RICHARD MILLE的发展与F1车手们在赛道上的卓越表现交...

Vue从入门到实践 丨Vue-router基本使用

1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址:https://router.vuejs.org/zh/2. vue-router 安装...

Vue真是太好了 壹万多字的Vue知识点 超详细!

1??、Vue和其他两大框架的区别Angular 学习成本太高React 代码可读性差Vue 学习成本较低 很容易上手VUE官方: https://cn.vuejs.org/v2/guide/comparison.html?2??、Vue是什么Vue是一套用于构建用户界面的渐进式框架 "前端...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...

VUE3+JAVA商城源码小程序APP商城

三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。软件架构后端: springboot2.3.12管...