方法一, 利用 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. pytest学习笔记

    From: https://blog.csdn.net/gaowg11/article/details/54910974 由于对测试框架了解比较少,所以最近看了下pytest测试框架,对学习心得做个记 ...

  2. S型顺序遍历二叉树(c++实现)

    //1.s型顺序访问二叉树,默认先左后右:利用两个栈来实现:如果先右后左的话,改变一下入栈的顺序就行 //2.注意s1 s2插入栈的顺序是不同的 void S_LevelOrderPrint(Tree ...

  3. document.location.search 的作用

    document.location.search 的作用 document.location.search 比如一个URL是XXXX?g=1,那么document.location.search的值就 ...

  4. ES6基础一

    声明方式 var和let的区别 1,var用来声明全局变量,let用来声明局部变量:               2,var可以提升变量,let声明的变量不在变量提升:        const声明常 ...

  5. 廖雪峰Java-3流程控制-7for循环

    for循环 for循环使用计数器实现循环 for循环条件需要设置:计数器初始值:循环前检测条件:每次循环后如何更新计数器 计数器变量通常命名为i int[] ns = {1,4,9,16,25}; f ...

  6. 使用docker搭建redis主从模式

    前期准备: 本地Linux版本:CentOS Linux release 7.5.1804 (Core)Docker版本:Docker version 1.13.1, build dded712/1. ...

  7. 使用unbound提供DNS域名解析服务

    使用unbound提供DNS域名解析服务 # 作者:Eric # 微信:loveoracle11g # 先配yum仓库 [root@server1 ~]# cd /etc/yum.repos.d/ [ ...

  8. JSP基础解析

    EL表达式     https://www.cnblogs.com/zhouguanglin/p/8117406.html EL(Expression Language) 是为了使JSP写起来更加简单 ...

  9. 腾讯微信被怼，iOS版微信不能打赏了

    2017年4月19日,估计很多有着大量粉丝的微信自媒体作者会感到很不爽,因为他们的苹果粉丝再也无法很爽快地.肆意.任性地打赏他们了,按目前iphone手机的占有率,估计打赏率会掉一半以上. 据微信派微 ...

  10. python数据类型总结

    按存值个数区分 标量/原子类型 数字,字符串 容器类型 列表,元组,字典 按可变不可变区分 可变 列表,字典 不可变 数字,字符串,元组 按访问顺序区分 直接访问 数字 顺序访问(序列类型) 字符串, ...