css实现滚动条一直显示,并且实现滚动条样式的修改

这篇具有很好参考价值的文章主要介绍了css实现滚动条一直显示,并且实现滚动条样式的修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css实现滚动条一直显示,并且实现滚动条样式的修改

自带的滚动条只有当鼠标移上去的时候才会显示,其他时候隐藏,这样用户很难看出这个是能划动的,这就需要滚动条一直显示在页面上,并且需要按照自己一定的样式去修改。
实现效果:

css实现滚动条一直显示,并且实现滚动条样式的修改,每天一点进步,css,css3,前端文章来源地址https://www.toymoban.com/news/detail-705699.html

先把原来的隐藏,再重新写自定义的样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul{
      height: 500px;
      overflow-y: scroll;
      overflow-x: hidden;
      width: 50px;
      border: 1px solid red;
    }
    ul::-webkit-scrollbar { 
      /* 隐藏默认的滚动条 */
      -webkit-appearance: none;
    }
    ul::-webkit-scrollbar:vertical { 
        /* 设置垂直滚动条宽度 */
        width: 10px;
    }
    ul::-webkit-scrollbar:horizontal{
        /* 设置水平滚动条厚度 */
        height: 2px;
    }
    ul::-webkit-scrollbar-thumb { 
      /* 滚动条的其他样式定制,注意,这个一定也要定制,否则就是一个透明的滚动条 */
      border-radius: 8px;   /* 设置滚动条的圆角 */
      border: 2px solid rgba(255,255,255,.4);  /* 设置滚动条的边框 */
      background-color: rgba(0, 0, 0, .5); /* 设置滚动条的颜色填充 */
    }

  </style>
</head>
<body>
    <ul>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
      <li>30</li>
    </ul>
</body>
</html>

到了这里,关于css实现滚动条一直显示,并且实现滚动条样式的修改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用css如何实现样式延迟显示

    使用CSS要使元素的样式延时展示 虽然CSS最为一个样式语言并没有为我们提供这样的延时方法 但是我们可以使用 CSS3 中的 animation 动画属性来实现, 当然animation没办法单独去实现动画,我们需要 @keyframes去创建动画 非常简单的逻辑,就是在动画中定义一个样式,用animation实现

    2024年02月09日
    浏览(28)
  • css设置滚动条、并设置滚动条样式

    2024年02月15日
    浏览(47)
  • css-滚动条样式设置

    给能设置宽高的元素添加 overflow: scroll 样式,会让该元素区域产生滚动条。 以下行文案例皆是在 Edge 浏览器环境下测试。 通过设置 ::-webkit-scrollbar 伪元素影响滚动条样式,注意它仅在基于 Blink 或 Webkit 的浏览器上可用。 用于设置整个滚动条的样式。 eg:设置滚动条大小及背

    2024年02月02日
    浏览(31)
  • (css)滚动条样式

    效果:

    2024年02月16日
    浏览(45)
  • 滚动条样式修改

    如果正在使用基于 WebKit 的浏览器,如 Chrome 或 Safari,可以使用以下代码来自定义滚动条样式。将此代码加入到你的 CSS 文件中: 这段代码会设置滚动条的宽度、轨道和滑块的样式。 Firefox 浏览器从版本 64 开始支持 scrollbar-width 和 scrollbar-color 属性。这是一个简单的示例,展示

    2024年01月25日
    浏览(19)
  • css样式-内容固定在页面底部,不随滚动条滚动

    目录 1、内容固定在页面底部,不随着滚动条滚动 2、添加内容,简单测试是否固定  position:                 1、【relative】相对定位;2、【absolute】绝对定位;                  3、【fixed】固定定位;4、【static】默认值;5、【sticky】粘性定位。 这里设置为fixed,

    2024年02月11日
    浏览(54)
  • 修改滚动条样式 和 那些高度

      网页可见区域宽: document .body.clientWidth; 网页可见区域高: document .body.clientHeight; 网页可见区域宽: document .body.offsetWidth   (包括边线的宽); 网页可见区域高: document .body.offsetHeight (包括边线的宽); 网页正文全文宽: document .body.scrollWidth; 网页正文全文高: docume

    2024年02月12日
    浏览(19)
  • 在vue中全局修改滚动条样式

    在App.vue中加入以下样式代码: 就会出现如下图所示样式: 注意:app的样式中不要使用scoped,不然全局无法生效!

    2024年02月13日
    浏览(39)
  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(52)
  • 前端如何实现隐藏滚动条,并且页面还可以滚动

    在前端中,可以通过 CSS 和一些简单的样式调整来实现隐藏滚动条,同时保持页面可滚动。这通常涉及到在容器内部创建滚动区域,并隐藏默认的滚动条样式。 下面是实现这一效果的基本步骤: 创建一个滚动容器元素,使其包裹需要滚动的内容。 通过 CSS 隐藏默认的滚动条样

    2024年02月02日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包