css 自定义滚动条样式

css 自定义滚动条样式我遇到的场景:对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。那么首先打开iframe时应该去掉滚动条scrolling="n

大家好,又见面了,我是你们的朋友全栈君。

我遇到的场景:

对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。

那么首先打开iframe时应该去掉滚动条 scrolling=”no”,然后在需要滚动的区域自定义滚动条。

<iframe frameborder="0"   scrolling="no" src="index.html" > 

自定义滚动条代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动</title>
    <style>
.scroll_contain{
       overflow-y: scroll;
       border: none;
}
.scroll_config::-webkit-scrollbar {/*滚动条整体样式*/
       width:5px;
       height:5px
    }
.scroll_config::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        background-color:#ccc;
        border:solid 1px #ccc;
        border-radius:2px;
    }
.scroll_config::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 2px;
        background: #EDEDED;
    }
.scroll_config::-webkit-scrollbar-arrow {
        color:#F00;
        background:#0F0;
}    
    </style>
</head>
<body>
       <div class="scroll_contain scroll_config" style="height: 200px;width: 200px">
               <div>
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            东方不败东方不败东方不败东方不败东方不败东方不败
            </div>
       </div>
</body>
</html>

效果如下:

<span role="heading" aria-level="2">css 自定义滚动条样式

 

 

 

转 : https://www.cnblogs.com/zuochengsi-9/p/7658339.html

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155418.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • montavuego_Vue.js+Flask+MongoDB

    montavuego_Vue.js+Flask+MongoDBMongoVUE是一个可以操作mongodb的图形化客户端,方面查看等使用; 一、下载MongoVUE(绿色激活成功教程版):http://download.csdn.net/detail/u011694549/5945519二、解压,打开文件夹:           三、启动MongoVUE.exe         四、建立连接,即可访问数据库了

  • Spring batch批量处理框架最佳实践

    Spring batch批量处理框架最佳实践springbatch精选,一文吃透springbatch批量处理框架前言碎语批处理是企业级业务系统不可或缺的一部分,springbatch是一个轻量级的综合性批处理框架,可用于开发企业信息系统中那些至关重要的数据批量处理业务.SpringBatch基于POJO和Spring框架,相当容易上手使用,让开发者很容易地访问和利用企业级服务.springbatch具有高可扩展性的框架…

  • php7不再支持HTTP_RAW_POST_DATA,微信支付$GLOBALS[‘HTTP_RAW_POST_DATA’]获取不到数据,…

    php7不再支持HTTP_RAW_POST_DATA,微信支付$GLOBALS[‘HTTP_RAW_POST_DATA’]获取不到数据,…

    2021年10月29日
  • STM32F0x HAL库学习笔记(3)使用HAL库延时函数(HAL_Delay())[通俗易懂]

    STM32F0x HAL库学习笔记(3)使用HAL库延时函数(HAL_Delay())[通俗易懂]本文开发环境:MCU型号:STM32F051R8T6IDE环境:MDK5.25代码生成工具:STM32CubeMx5.0.1本文内容:systick定时器简介使用HAL_Delay()延时函数实现LED灯闪烁Systick定时器HAL_Delay()延时函数while(1){/*USERCODEENDWHI…

  • oracle修改用户的密码_修改linux用户密码

    oracle修改用户的密码_修改linux用户密码oracle中修改用户密码首先是win键+R输入cmd输入sqlplus/assysdba,回车,此时进入到SQL>输入alterusersystemidentifiedbysystem;这行代码的意思就是修改system用户的密码为system(注意:代码末尾要加上;分号)…

  • Mysql表分区(diskgenius分区教程)

    Mysql表分区(diskgenius分区教程)一、MySQL分区表介绍分区是一种表的设计模式,正确的分区可以极大地提升数据库的查询效率,完成更高质量的SQL编程。但是如果错误地使用分区,那么分区可能带来毁灭性的的结果。分区功能并不是在存储引擎层完成的,因此不只有InnoDB存储引擎支持分区,常见的存储引擎MyISAM、NDB等都支持分区。但是并不是所有的存储引擎都支持,如CSV、FEDORATED、MERGE等就不支持分区。在

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号