zoukankan      html  css  js  c++  java
  • html 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>超出部分隐藏滚动条</title>
    </head>
    <style type="text/css">
        #box {
            width: 500px;
            height: 300px;
            overflow-x: hidden;
            overflow-y: scroll;
            line-height: 30px;
            text-align: center;
        }
        #box::-webkit-scrollbar {
            display: none;
        }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
        <div id="box">
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
            你好 </br>你好 </br>
        </div>
    </body>
    </html>

    方法二, 利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>超出部分滚动条</title>
    </head>
    <style type="text/css">
        #box {
            /* 父容器设置宽度, 并超出部分不显示 */
            width: 500px;
            height: 300px;
            overflow: hidden;
        }
        #box > div {
            /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
            width: 517px;
            height: 300px;
            line-height: 30px;
            text-align: center;
            overflow-y: scroll;
        }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
        <div id="box">
            <div>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
                你好 </br>你好 </br>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    ACE 资源
    为什么在VC6中TRACE不能输出信息?
    实例源码Android智能家居系统
    项目源码Android音乐播放器
    实例源码Android捕鱼达人经典游戏
    精品教程NDK环境搭建(1)CYGWIN的安装
    实例源码Android人脸识别技术(眼睛位置)
    精品教程NDK基础例子,编译.SO文件
    项目源码Android高清壁纸应用
    精品教程Android中通过NDK使用OpenCV库
  • 原文地址:https://www.cnblogs.com/lovling/p/8000363.html
Copyright © 2011-2022 走看看