方法一, 利用 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. 开始使用GoJS

    GoJS是一个用于实现交互式图表的JavaScript库.本页将向您展示使用GoJS的必要条件. 由于GoJS是一个依赖于HTML5功能的JavaScript库,因此您需要确保您的页面声明它是一个HT ...

  2. Centos7 安装sz,rz命令

    yum install lrzsz 我记得以前某个我敬佩的人说过压缩分很多种,有空,补充这篇笔记.加油~

  3. Ubuntu(虚拟机)下安装Qt5.5.1

    1.到官网下载需要的相应版本 http://download.qt.io/archive/qt/ (这里我选择的是 qt-opensource-linux-x64-android-5.5.1.run) ...

  4. vuex状态管理2

    在vuex的官网https://vuex.vuejs.org中,提到的核心概念一共有5个,分别是State.Getter.Mutation.Action和Module,在上一篇随笔中,我们主要用到其中 ...

  5. JavaScript之图片操作5

    本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...

  6. Redis单线程单进程为什么效率那么高

    1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单,对数据操作也简单,Red ...

  7. 学习笔记之pandas

    Python Data Analysis Library — pandas: Python Data Analysis Library https://pandas.pydata.org/ panda ...

  8. [转][html]radio 获取选中状态

    方法一: if ($("#checkbox-id").get(0).checked) { // do something } 方法二: if($('#checkbox-id').i ...

  9. 判断浏览器是否IE（IE11可用）

    function isIE() { //ie?         if (!!window.ActiveXObject || "ActiveXObject" in window) { ...

  10. 跨域CORS原理及调用具体示例

    原文: https://www.cnblogs.com/keyi/p/6726089.html 上篇博客介绍了JSONP原理,其不足,就是只能使用GET提交,若传输的数据量大,这个JSONP方式就歇菜 ...