资讯专栏INFORMATION COLUMN

自定义滚动条

glumes / 791人阅读

摘要:效果图

html↓

css↓

.test {
      display: inline-block;
      margin: 60px 40%;
      width: 280px;
      padding: 5px 4px;
      min-height: 20px;
      line-height: 20px;
      max-height: 72px;
      border: 1px solid #ccc;
      font-size: 12px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-user-modify: read-write-plaintext-only;
      border-radius: 4px;
    }
      .test::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }
    .test::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #C8C8C8;
    }
    .test::-webkit-scrollbar-track {
      border-radius: 4px;
      background-color: #FFFFFF;
    }

效果图

                               (๑′ᴗ‵๑)I❤

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116931.html

相关文章

  • 如何定义CSS滚动的样式?

    摘要:需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和I...

    linkFly 评论0 收藏0
  • 如何定义CSS滚动的样式?

    摘要:可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。 0.需求...

    kviccn 评论0 收藏0
  • 如何定义CSS滚动的样式?

    摘要:需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条,不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和I...

    leonardofed 评论0 收藏0
  • 修改bootstrap table 源码实现固定高时定义滚动的样式

    摘要:同时在里,大概第行,有一些用来计算滚动条宽度的样式。下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,自定义滚动条样式就完成了。         bootstrap table 其方便性与实用性已不言而喻,然,在我们实际应用中总是有这种那种的需求,比如我近期遇到的,就是需要自定义滚动条 = =,不过话说初始滚动条确实有点难看...         现在大多数网站滚动条都还是...

    littleGrow 评论0 收藏0
  • 修改bootstrap table 源码实现固定高时定义滚动的样式

    摘要:同时在里,大概第行,有一些用来计算滚动条宽度的样式。下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,自定义滚动条样式就完成了。         bootstrap table 其方便性与实用性已不言而喻,然,在我们实际应用中总是有这种那种的需求,比如我近期遇到的,就是需要自定义滚动条 = =,不过话说初始滚动条确实有点难看...         现在大多数网站滚动条都还是...

    anRui 评论0 收藏0
  • 浏览器滚动 --- 定义“衣裳”

    摘要:由于种种原因,浏览器的默认滚动条衣裳实在是,为了美,本人结合万维网各大神给的经验和自己的实践,做了此篇总结。标识对象是否放到滑块的后面。该伪类可以用于按钮和内层轨道。用于所有滚动条轨道,指示滚动条圆角是否显示。由于种种原因,浏览器的默认滚动条衣裳实在是 (ˉ▽ ̄~)~~,为了美,本人结合万维网各大神给的经验和自己的实践,做了此篇总结。若有错误,请在评论里给出,我会及时更改。 我在电脑上打开了...

    mtunique 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<