滑动方块怎么无限移动,滑动方块怎么用前后移动

首页 > 实用技巧 > 作者:YD1662023-10-25 16:09:31

1、滚动条隐藏

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

滑动方块怎么无限移动,滑动方块怎么用前后移动(1)

//隐藏代码: /*隐藏滚轮*/ .ul-scrool-box::-webkit-scrollbar, .ul-scrool-box ul::-webkit-scrollbar { display: none; } 2、滚动条美化

滑动方块怎么无限移动,滑动方块怎么用前后移动(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处变动,是为了和浏览器的滚动条保持一致

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.