方法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. WPF 开机注册自启动及设置确保以管理员运行

    最近用到开机自启动设置,在此记录下设置自启动的步骤,如果对各位有需要可以借阅,之前设置管理权限解释在创建解决方案是将VS以管理员方式打开,这种方法可以实现,但是个人还是偏向与本文的方式,不多说啥了,下 ...

  2. java web 乱码终结

    配置 tomcat 打开 tomcat 安装路径下的 conf/server.xml 文件,将 port 为 8080 的 connector 做如下更改: <Connector port=&q ...

  3. WCF绑定netTcpBinding寄宿到IIS

    继续沿用上一篇随笔中WCF服务类库 Wettery.WcfContract.Services WCF绑定netTcpBinding寄宿到控制台应用程序 服务端 添加WCF服务应用程序 Wettery. ...

  4. 菜鸟在ubuntu 16.04下制作am335x的SD卡启动盘反思

    以前只在消费电子平台android和rtos上做软件,每次都是公司的环境现成的,根本不用去想启动加载那部分 的事情,最近在做一个工控机的项目时,接触到了TI的arm335x系列的平台,才发现在嵌入式的 ...

  5. python中除法的几种类型

    传统除法:直接后缀小数点,同样结果是和最大的小数点对齐 >>> 1/2 0 >>> 1.0/2 0.5 >>> 1/2.0 0.5 >> ...

  6. python3模块: os

    简介 os模块主要用于提供系统高级别的操作. 常用方法 os.access(path, mode) # 检验权限模式 os.chdir(path) # 改变当前工作目录 os.chflags(path ...

  7. 如何用java POI将word中的内容导入到mysql数据库中

    由于作业需要,要求我们将word文档中的数据直接导入到mysql中,在网上找了很常时间,终于将其解决. 由于比较初级,所以处理的word文档是那种比较规范的那种,条例比较清晰,设计的思路也比较简单,就 ...

  8. [EXP]Adobe ColdFusion 2018 - Arbitrary File Upload

    # Exploit Title: Unrestricted # Google Dork: ext:cfm # Date: -- # Exploit Author: Pete Freitag of Fo ...

  9. 学生成绩管理系统3.0(JSP+Servlet+MySQL)

    源代码:戳这里! (2019-01-08 更新 惊讶于这么久了还有人看这个项目 于是把代码传到 github 了(辣鸡CSDN) https://github.com/G-lory/StudentAc ...

  10. 我从来不理解 JavaScript 闭包，直到有人这样向我解释它...

    正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...