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

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

  1. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 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手动滑动轮播图（隐藏滚动条）

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  5. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  6. css 文本超出n行就隐藏并且显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  7. css设置超出部分文档隐藏（在table标签中不好使解决方案在下）

    css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

  8. css文本超出2行就隐藏并显示省略号

    之前在网上看到过这样的代码,感觉有的时候还是挺有用的,故留个笔记. display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -webkit-box-orient:vertica ...

  9. css 文本超出2行就隐藏并且显示省略号

    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webk ...

随机推荐

  1. [Algorithm] 11. Linked List Cycle

    Description Given a linked list, determine if it has a cycle in it. To represent a cycle in the give ...

  2. 微信小程序火爆，谁能在微信小程序赚取第一桶金？

    2016年末,最火的话题:微信小程序.身边好多朋友蠢蠢欲动的想要借微信小程序创业,春节期间整理思绪,我们就简单说说微信的小程序可能会让哪些人赚钱: 1,微信小程序培训,能够快速赚钱 做培训的肯定首先赚 ...

  3. jet flow in a combustion chamber

    Table of Contents 1. contacts 2. Paper digest 2.1. LES vs. RANS 2.2. Dynamics of Transient Fuel Inje ...

  4. 转载 - Python里面关于 模块 和 包 和 __init__.py 的一些事

    出处:http://www.cnblogs.com/tqsummer/archive/2011/01/24/1943273.html python中的Module是比较重要的概念.常见的情况是,事先写 ...

  5. codevs——1462 素数和

    1462 素数和  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 青铜 Bronze 题解       题目描述 Description 给定2个整数a,b 求出它们之间(不含a ...

  6. ubuntu18.04安装magento2

    magento2更新很快,使用的技术都是很前沿的,国内外的技术帖子又很少,安装的时候难免会遇到各种各样的问题.我们单位因为是外资,总部在国外,最近在自主开发电商网站,开发语言是php,首选了magen ...

  7. open redis port for remote connections

    edit /etc/redis.conf Add below line after bind 127.0.0.1, then try redis-cli -h xxx.xxx.xxx.xxx ping ...

  8. dota监測

    执行环境:win7 32位. python版本号:3.4.1 因为用到了一些win32api,这些并不是python标准库自带的,所以你须要先去下载pywin32模块.去http://sourcefo ...

  9. JBoss AS6 的服务状态说明

    (本文源码版本号为JBoss-AS-Final 6.1.0) JBoss 的服务状态定义在 LifecycleState 类中. 一共同拥有八个状态:INSTANCIATED, PRE_INIT, I ...

  10. Python FAQ1：传值，还是传引用？

    在C/C++中,传值和传引用是函数参数传递的两种方式.由于思维定式,从C/C++转过来的Python初学者也经常会感到疑惑:在Python中,函数参数传递是传值,还是传引用呢? 看下面两段代码: de ...