方法一, 利用 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. a message box to confirm the action

    当点击窗口的X按钮时,弹出确认退出消息框,继续点击Yes,退出.否则,窗口继续处于打开状态 代码: """ This program shows a confirmati ...

  2. webscoket通信初步（一）

    只要动手做起来,多投入时间和精力.耐心去研究,以大多人的智商加google,平时遇到的大部分问题我们都是可以自己解决的,大部分的知识我们都是可以掌握的. 我们都知道http协议是单向请求的,无法实现双 ...

  3. NIO框架之MINA源码解析（五）：NIO超级陷阱和使用同步IO与MINA通信

    1.NIO超级陷阱 之所以说NIO超级陷阱,就是因为我在本系列开头的那句话,因为使用缺陷导致客户业务系统瘫痪.当然,我对这个问题进行了很深的追踪,包括对MINA源码的深入了解,但其实之所以会出现这个问 ...

  4. 学习笔记之Microsoft Office 365

    云办公确实很方便. Office 365 登录 | Microsoft Office https://www.office.com/ Office 365 - Wikipedia https://en ...

  5. HTML背景图片自适应

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  6. java中源代码和lib库中有包名和类名都相同的类(转)

    https://blog.csdn.net/itachiwwwg/article/details/9003261 当java的源代码中出现了和系统的lib库中的包名与类名完全一样的类时,系统应当怎么加 ...

  7. IGMP Internet组管理协议 未完

    一.IGMP Internet组管理协议 2.IGMP v2 3.IGMP三版本比较 4.1.1.4 IGMP v2 与 IGMP v1 的兼容 5.IGMP窃听(IGMP Snooping) IGM ...

  8. xml布局解析报错的可能原因

    xml布局解析报如下的错11-15 16:55:21.425 17633-17633/com.hongfans.mobileconnect I/LogUtils_info: [CrashHandler ...

  9. PROC UNIVARIATE 简单示例

    OPTIONS NOCENTER LS=MAX PS=MAX USER=SASHELP; PROC UNIVARIATE DATA=FISH;WHERE SPECIES='Bream';VAR HEI ...

  10. Android之socket多线程（二）

    使用ServerSocket创建服务器端: public static void main(String[] args) throws IOException { // TODO Auto-gener ...