正文 

当前位置： 首页 > java > java框架

用css实现自定义带有过渡和隐藏效果的滚动条

lyls      2022-02-14     490

关键词：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<ul>
<li>12</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<style>
* {
margin: 0;
padding: 0;
}
 
html,
body {
width: 100%;
height: 100%;
}
 
ul {
transition: all .5s;
width: 200px;
height: 300px;
margin: 30px auto;
list-style: none;
overflow-y: scroll;
}
 
li {
width: 100%;
height: 30px;
border-bottom: 1px solid #aaa;
}
 
li:hover {
background: #eee;
}
 
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
}
 
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
 
ul:hover {
color: rgba(0, 0, 0, 0.3);
}
 
ul {
background: white;
padding: 20px;
width: 200px;
height: 300px;
margin: 100px auto;
border-radius: 3px;
overflow: auto;
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 black;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
transition: color .3s ease;
}
</style>
</body>

</html>
</body>

</html>

带有 css 或 jquery 的自定义滚动条 firefox

】带有css或jquery的自定义滚动条firefox【英文标题】：customscrollbarfirefoxwithcssorjquery【发布时间】：2018-12-2119:51:53【问题描述】：我将文本放在带有垂直滚动条的div中。我想隐藏这个栏。在谷歌浏览器上没问题，但在火狐上它是可... 查看详情

css实现隐藏滚动条同时又可以滚动(代码片段)

移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome和Safari），于是想... 查看详情

css如何实现滚动条隐藏但鼠标仍然可以滚动

　　在做移动端项目的时候，有些时候需要元素超出屏幕可以滚动，为了美观需要隐藏滚动条。如果只需兼容chrome和safari，可以使用自定义滚动条的伪对象选择器——：：webkit-scrollbar。　　具体使用即：element::webkit-scrollbar{displa... 查看详情

javascript自定义浏览器滚动条兼容ie火狐和chrome

...变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图 查看详情

自定义滚动条样式-transition无效(代码片段)

...后2秒内无操作隐藏滚动条。2s内隐藏比较麻烦，不能用css实现，只能监听容器的touch事件，然后给滚动条加个opacity:0的class。.class::-webkit-scrollbarwidth:10px;-webkit-transition:all1s;transition:all1s;.class::-webkit-scrollbar-thumbbo 查看详情

html+css滚动条样式自定义-适用于div,iframe,html等

...与伦比，在此做下总结： 首先自定义浏览器滚动条的实现原理：计算浏览器滚动条的高度，层级1的高度与滚动条的总高度是一样的，通过相似比例计算：浏览器滚动条总高度：滚动条高度=层级②：层级①=>  关于... 查看详情

自定义滚动条原理

关于实现自定义滚轮，首先要对整个布局进行了解：1、 1.需要显示的层级和 2.需要被滚动层级的关系：   1--层级1具有溢出隐藏属性，目的是为了隐藏 层级2 多出的部分。   2--由于在层级1的... 查看详情

css-(左右滑动时，隐藏底部滚动条)

...到此类效果？这里如果不借用其它框架，单纯的利用css来实现怎么做呢？1.这一看就要用到overflow，但是用它会有一个默认的滚动条；2.那么重点来了，怎么解决这个问题呢？3.用 ::-webkit-scrollbar就可以很好地解决。代码如下：... 查看详情

关于自定义滚动条原理

  关于实现自定义滚轮，首先要对整个布局进行了解：1、 1.需要显示的层级和 2.需要被滚动层级的关系：   1--层级1具有溢出隐藏属性，目的是为了隐藏 层级2 多出的部分。   2--由于... 查看详情

css3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

....csdn.net/u014175572/article/details/51535768CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并... 查看详情

htmljs或者css怎么做到隐藏滚动条，但是依旧可以滚动？

...如下：二、隐藏内层DIV的宽度扩展资料：overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。... 查看详情

如何自定义css滚动条的样式？

...，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。0.需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。那么如何自定义滚动条的样式呢？下面一起来看看... 查看详情

wpf自定义滑动scrollviewer

...动条，可以左右滑动，用鼠标按住(触摸）然后释放可以实现快速滑动。我们有几种方案：1、ScrollViewer,修改其中的横向滚动条，将其中的背景设置为透明。　　但是，存在的问题是，没有快速滑动的效果2、ListBox，修改Panel为WrapP... 查看详情

css轻松搞定显示隐藏的效果

...划上图片时会显示一些淡入淡出的效果问：这是怎么原理实现的？其实就是显示和隐藏问：那么这个现实和隐藏如何实现呢？其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点无论使用哪一种方式实现，首先这... 查看详情

css3特性修改(自定义)浏览器默认滚动条

...好好的改它干啥了，也带不来用户体验，就是好看点嘛！实现原理其实是用了伪元素，webkit的伪元素实现很强，可以把滚动条当成一个页面元素来定义，再结合一些CSS3属性，比如圆角、渐变、rgba等等。最常见的伪元素，我们最... 查看详情

带有自定义滚动条的 QML Listview

】带有自定义滚动条的QMLListview【英文标题】：QMLListviewwithscrollbarcustomized【发布时间】：2020-05-2013:06:15【问题描述】：我尝试在Google和专用论坛上搜索此问题，但没有找到任何内容。我的问题：我有一个带有委托的Listview，根据Q... 查看详情

带有自定义刻度的滑块（标签和速度）

...动条：此屏幕截图中存在两个主要功能，但我找不到自己实现的方法：滑块/滚动条中同一范围内的所有位置都应具有相同的工具提示值。在屏幕截图示 查看详情

css3自定义滚动条样式-webkit-scrollbar

::-webkit-scrollbar{/*隐藏滚轮*/display:none;} CSS3自定义滚动条样式-webkit-scrollbar 前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式... 查看详情