css美化滚动条

最新推荐文章于 2024-11-17 12:40:55 发布

转载最新推荐文章于 2024-11-17 12:40:55 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/camille666/p/css_beautify_scrollbar.html

本文介绍了如何使用CSS来美化和自定义滚动条的样式，包括改变滚动条的宽度、颜色及透明度等，并提供了具体的代码实现。同时，还探讨了滚动条在不同情况下的显示与隐藏方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、滚动条出现的地方
1、浏览器边框，当页面内容超过浏览器视窗大小；
2、textarea，内容过多时；
3、iframe；
4、div或任何block元素，当它们的被设定成overflow属性时。

二、css设置

::-webkit-scrollbar {
  width: 12px;
}

/* Track */        
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */ 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 0, 0, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
    
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}
.container {
    width: 300px;
    height: 300px;
    background-color: #DCDCDC;
    overflow: scroll;
    overflow-x: hidden;
    /* showing scrollbars */
}

三、html

<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac</p>
<p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
<p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique.</p>
<p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>
</div>

四、鼠标移入，就显示滚动条，鼠标移出，就不显示

:-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background-color: rgba(0, 0, 0, 0);
      overflow: hidden;
      border-radius: 3px;
}
:-webkit-scrollbar-track {
      margin-right: 2px;
      overflow: hidden;
}
:-webkit-scrollbar-corner {
      -webkit-appearance: none;
}
:-webkit-scrollbar-thumb {
      border-radius: 3px;
      width: 4px;
      -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
      background-color: rgba(0, 0, 0, 0);
      -webkit-appearance: none;
      box-shadow: inset 0 0 0 4px;
}

五、滚动条出现，阻止页面跳动

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

转载于:https://www.cnblogs.com/camille666/p/css_beautify_scrollbar.html