zoukankan      html  css  js  c++  java
  • 自定义scoll样式

    使用伪类自定义scroll样式

    效果:

    代码:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
        <title></title>
        <style type="text/css">
            .inner {
                 265px;
                height: 400px;
                position: absolute;
                top: 33px;
                left: 50%;
                transform: translateX(-50%);
                overflow: hidden;
                border: 1px solid #ddd;
                padding-left: 10px;
            }
            
            .innerbox {
                overflow-x: hidden;
                overflow-y: auto;
                color: #000;
                font-size: .7rem;
                font-family: "5FAE8F6F96C59ED1", Helvetica, "黑体", Arial, Tahoma;
                height: 100%;
            }
            /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/      
            .innerbox::-webkit-scrollbar {
                 8px;
                height: 8px;
                background-color: #F5F5F5;
            }
            /*定义滚动条轨道 内阴影+圆角*/     
            .innerbox::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                border-radius: 10px;
                background-color: #9F88FF;
            }
            /*定义滑块 内阴影+圆角*/    
            .innerbox::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                background-color: #CC00FF;
            }
        </style>
    
    </head>
    
    <body>
        <div class="inner">
            <div class="innerbox">
                <p style="height:200px;">这是内容111</p>
                <p style="height:400px;">这里是内容222</p>
                <p>这里是内容333</p>
            </div>
        </div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    免费分享各大快递接口代码
    js 拖动div
    前端开发入门学习笔记(一)
    2017年2月14日
    html表格中的tr td th用法
    转:上传图片并给图片加水印(公共类积累)
    通用防SQL注入代码ASP版
    Firebug 在IE Opera Safari 下这样使用
    [正则表达式]文本框输入内容控制
    图片上传添加水印类
  • 原文地址:https://www.cnblogs.com/qianxuebing/p/9835424.html
Copyright © 2011-2022 走看看