方法一, 利用 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>

HTML5 元素超出部分滚动, 并隐藏滚动条的更多相关文章

  1. CSS元素超出部分滚动，并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  2. css 给div添加滚动并隐藏滚动条

    在html中 <div class="box"> <div>下面内容会单独滚动</div> <div class="scroll ...

  3. css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）

    解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...

  4. CSS 实现隐藏滚动条同时又可以滚动

    方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...

  5. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  6. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  7. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  8. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  9. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

随机推荐

  1. Java第01次实验提纲(基本概念+编程环境入门+PTA)

    0. 控制台下编译.运行 在Notepad++编写Java程序 学会使用控制台,javac.java 学会使用Notepad++ 参考资料: 控制台-cmd应用基础 扫盲教程 使用命令行编译并运行ja ...

  2. CSDN也有我的博客啦

    我的CSDN:https://blog.csdn.net/qq_40875849

  3. 廖雪峰Java2面向对象编程-2数据封装-1方法重载

    方法重载 方法重载Overload是指:多个方法的方法名相同,但各自的参数不同 参数的个数不同 参数的类型不同 参数位置不同 方法返回值类型通常都是相同的 目的:相同功能的方法使用同一名字,便于调用 ...

  4. SEO之HTML代码优化

    原文地址:http://www.admin5.com/article/20081128/117821.shtml   一.文档类型(DOCTYPE) XHTML1.0有三种DOCTYPE: 1.过渡型 ...

  5. Oracle下PLSQL连接没有数据库的问题

    https://blog.csdn.net/master_yao/article/details/51055850 参考博文地址 当PLSQL连接提示时请注意 请将首选项里内容进行修改 指定oci.d ...

  6. [UE4]RPC，远程调用

    RPC 一.Remote Procedure Call:远程程序调用 二.一个进程调用另外一个进程上的函数 由于“Server-shoot”方法被标记为“在服务器上运行”,所以尽管是在第二个窗口(客户 ...

  7. sklearn获得某个参数的不同取值在训练集和测试集上的表现的曲线刻画

    from sklearn.svm import SVC from sklearn.datasets import make_classification import numpy as np X,y ...

  8. spark streaming检查点使用

    import org.apache.spark._ import org.apache.spark.streaming._ /** * Created by code-pc on 16/3/14. * ...

  9. delphi正则表达式学习笔记（三）

    Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它.  官方网站: http://www.regular-e x ...

  10. (转)C# BackgroundWorker组件的原理分析

    原文地址:http://www.cnblogs.com/chaosimple/archive/2012/11/30/2796069.html 主要属性: 1.CancellationPending 获 ...