方法一, 利用 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. linux time-统计给定命令所花费的总时间

    推荐:更多linux 性能监测与优化 关注:linux命令大全 time命令用于统计给定命令所花费的总时间. 语法 time(参数) 参数 指令:指定需要运行的额指令及其参数. 实例 当测试一个程序或 ...

  2. Leetcode题目practice

    目录 Leetcode题目解答 1. 删除最外层的括号 2. 两数之和 3. 宝石与石头 4. 移除元素 5.删除排序数组中的重复项 6.寻找两个有序数组的中位数 7.盛最多水的容器 8.存在重复元素 ...

  3. python+pyqt5实现24点小游戏

    本文实例为大家分享了python实现24点游戏的具体代码,供大家参考,具体内容如下 描述:一副牌中A.J.Q.K可以当成是1.11.12.13.任意抽取4张牌,用加.减.乘.除(可加括号)把牌面上的数 ...

  4. THUSC2019滚粗记

    关于\(\mathrm{APIO}\)游记,它咕了... Day -1 \(\mathrm{\_tham}\)今天并没有准备给我们考试,所以机房充斥着过年的气息(雾 下午就要出发了,由于一些众所周知的 ...

  5. ds020507

    芯片输出端不加负载的时候,芯片的输出电压是9点多伏. 加上大的负载,芯片发热,电压接近输入电压. 正常负载,芯片输出7.0几伏. 版权声明:本文为博主原创文章,未经博主允许不得转载.

  6. Shiro-工作流程

    [与Web集成] 1.Shiro 提供了与 Web 集成的支持,其通过一个ShiroFilter 入口来拦截需要安全控制的URL,然后进行相应的控制. 2.ShiroFilter 类似于如 Strut ...

  7. poj 1379 模拟退火法

    /* 模拟退火法: 找到一些随机点,从这些点出发,随机的方向坐标向外搜索: 最后找到这些随机点的最大值: 坑://if(xx>-eps&&xx<x+eps&& ...

  8. 文件处理： read、readline、 readlines（）

    假设a.txt的内容如下所示: Hello Welcome What is the fuck.. 1. read([size])方法 read([size])方法:从文件当前位置起读取size个字节, ...

  9. [codeVS1404] 字符串匹配

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master         题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...

  10. ECMAScript 6 入门学习笔记（二）——变量的解构赋值

    一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...