方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome，不兼容 火狐 和 IE。

         /* for Chrome */

        .content::-webkit-scrollbar {

            display: none;

        }

方法2: 在内容容器A外面再嵌套一层容器B并设置 overflow:hidden ，容器A和容器B需要限制尺寸，就变相隐藏了，兼容所有浏览器。

 <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>超出部分滚动条</title>

</head>

<style type="text/css">

    .outer_container {

        /* 父容器设置宽度, 并超出部分不显示 */

        width: 200px;

        height: 300px;

        overflow: hidden;

    }

    .outer_container > .content{

        /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */

        width: 217px;

        height: 300px;

        overflow-y: scroll;

    }

</style>

<body>

    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条-->

    <div class="outer_container ">

        <div class="content">

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

            HELLO WORLD! </br>HELLO WORLD! </br>

        </div>

    </div>

</body>

</html>

CSS 实现隐藏滚动条同时又可以滚动的更多相关文章

  1. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  2. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  3. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  4. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  5. CSS怎么隐藏滚动条(三种方法)

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  6. 纯css，div隐藏滚动条，保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  7. CSS隐藏滚动条但又能滚动，不用js实现

    隐藏多余的内容,但是可以滑动查看 原理就在于padding-right:17px;把滚动条挤出去隐藏了

  8. css隐藏滚动条、移动端滚动卡顿的解决

    1.如果想保持容器能够滚动,同时不想看到丑陋的滚动条,chrome.firefox和移动端上不考虑兼容性直接 element::-webkit-scrollbar{ display:none } 2. ...

  9. CSS — 隐藏滚动条，依旧可以滚动

    公司的系统,在PC端可以管理我们的公众号,在发布模块页面时有一个预览功能,呈现页面在手机端的样式. 做法很简单,一会就完成了,但是在预览内容过长时手机外框会有一个滚动条,影响美观,于是就想把它去掉,有 ...

随机推荐

  1. 5.html基础标签:块级+行级元素+特殊字符+嵌套规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Javascript高级编程学习笔记（8）—— 变量

    日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类 ...

  3. 你不知道的javascript读书笔记3

    概述 这是我看<你不知道的JavaScript(中卷)>中关于类型检查的笔记,供以后开发时参考,相信对其他人也有用. typeof 我们知道js中有七种内置类型:undefined, nu ...

  4. 有没有人曾告诉你，你的SQL又报错了？[开发篇]

    引语:线上运行的真实环境总是变幻莫测,明明你在本地测试的时候各种情况都是OK得不要不要的,也许你还在为自己某个地方炫酷的效果以及神奇的设计感到激动不已!但是,到线上以后,他就会偶尔跟抽风一样的跟你sa ...

  5. Maven - 实例-5-依赖冲突

    避免依赖冲突的原则 如果项目中的pom.xml没有指定依赖的信息,而是通过继承来引用依赖,则很有可能发生继承同一个依赖的多个版本,从而产生依赖冲突. Maven通过如下两个原则来避免依赖冲突: 1- ...

  6. linux中环境变量PATH设置错误，导致ls cd 等命令不能使用，提示：没有那个文件或目录

    在CentOS7中执行了 PATH=/opt/:$PATH 然后执行ls时,出现 ls-bash: ls: 没有那个文件或目录 试了试其他命令也一样无法使用 后来执行 : export PATH=/u ...

  7. 全网最详细的Eclipse和MyEclipse里对于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发 ...

  8. Android开发之漫漫长途 XVII——动画(续)

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  9. 如何才能够系统地学习Java并发技术？

    微信公众号[Java技术江湖]一位阿里Java工程师的技术小站 Java并发编程一直是Java程序员必须懂但又是很难懂的技术内容. 这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类.当然这些 ...

  10. C#效率优化（1）-- 使用泛型时避免装箱

    本想接着上一篇详解泛型接着写一篇使用泛型时需要注意的一个性能问题,但是后来想着不如将之前的详解XX系列更正为现在的效率优化XX系列,记录在工作时遇到的一些性能优化的经验和技巧,如果有什么不足,还请大家 ...