资讯专栏INFORMATION COLUMN

自定义滚动条

glumes / 624人阅读

摘要:效果图

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滚动的样式?

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

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

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

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

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

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

    ...总是有这种那种的需求,比如我近期遇到的,就是需要定义滚动 = =,不过话说初始滚动确实有点难看...         现在大多数网站滚动都还是原始样式,不过在更加追求体验的年代,人们总是要尽可能消除影响整体...

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

    ...总是有这种那种的需求,比如我近期遇到的,就是需要定义滚动 = =,不过话说初始滚动确实有点难看...         现在大多数网站滚动都还是原始样式,不过在更加追求体验的年代,人们总是要尽可能消除影响整体...

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

    ...er { } /* 边角 */ ::-webkit-resizer { } /* 定义右下角拖动块的样 */ eg:html:  Hello 。。。 css: ::-webkit-scrollbar { width: 10px; height: 10px; background: #f2f2f2; border: yellowgreen 1px solid; }::-webkit-scrollbar-button { background-color:#2673...

    mtunique 评论0 收藏0

发表评论

0条评论

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