方法一, 利用 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. 51nod 1050 循环数组最大子段和【动态规划】

    N个整数组成的循环序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的连续的子段和的最大值(循环序列是指n个数围成一个圈,因此需要考虑a[n-1],a[n] ...

  2. Python使用Flask框架，结合Highchart处理xml数据

    1.html代码 <!DOCTYPE html><html lang="en"><head>    <meta charset=" ...

  3. 二： 安装centos服务环境软件mysql httpd php

    安装mysql--------------------------------------wget http://dev.mysql.com/get/mysql-community-release-e ...

  4. 在此计算机中仅有部分visual studio2010产品已升级到SP1,只有全部升级,产品才能正常运行

    先说废话: 本人机子刚装系统Win10 专业版 1709 开始安装vs2010的时候中途报错了,有一个什么驱动不兼容,被我给关闭了,继续安装完,然后找不到vs的启动快捷方式,开始里面没有,于是我开始修 ...

  5. Spring 进行junit单元测试时，出现method ‘initializationError’ 错误

    首先检查一下所有的方法是否为public 然后看是否有commons-logging这个日志包

  6. ssh整合配置文件------web.xml配置

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  7. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...

  8. 20180710使用gh

    转自:http://www.ywnds.com/?p=14265 一.背景 GitHub正式宣布以开源的方式发布gh-ost:GitHub的MySQL无触发器在线更改表定义工具!下面是官方给出gh-o ...

  9. 高数A（下）第九章

    第九章 空间解析几何 9.2 9.3 9.4 自测题

  10. BZOJ(8) 1053: [HAOI2007]反素数ant

    1053: [HAOI2007]反素数ant Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4118  Solved: 2453[Submit][St ...