滚动时显示滚动条，不滚动不显示

最新推荐文章于 2023-04-28 16:42:07 发布

斗萝大陆

最新推荐文章于 2023-04-28 16:42:07 发布

阅读量839

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_57260058/article/details/117648445

版权

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
  .content{
    width: 200px;
    height: 150px;
    padding-left: 10px;
    border: 1px solid #ccc;
    overflow-y: hidden;
  }
  .content:hover{
    overflow-y: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: 2px;
  }

  .scrollbar::-webkit-scrollbar-track-piece {
    background-color: #fff;
  } /* 滚动条的内层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-track {
    background-color: #fff;
  } /* 滚动条的外层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #d4d8e2;
  } /* 滚动条的内层滑块颜色 */

  .scrollbar::-webkit-scrollbar-button {
    background-color: #fff;
    display: none;
  } /* 滑轨两头的监听按钮颜色 */
  </style>
</head>
<body>
  <div class="content scrollbar">
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <p>内容4</p>
    <p>内容5</p>
    <p>内容6</p>
    <p>内容7</p>
  </div>
</body>
</html>

斗萝大陆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
滚动时显示滚动条，不滚动不显示

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .content{ width: 200px; height: 150px; padding-left: 10px; border: 1px solid #ccc; overflow-...
复制链接

扫一扫