方法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. 第六节：详细讲解Java中的装箱与拆箱及其字符串

    前言 大家好,给大家带来详细讲解Java中的装箱与拆箱及其字符串的概述,希望你们喜欢 装箱与拆箱 封装类有:Byte , short , Integer , Character , long , Fl ...

  2. Java学习笔记39（转换流）

    转换流:字符流和字节流之间的桥梁 用于处理程序的编码问题 OutputStreamWriter类:字符转字节流 写文本文件: package demo; import java.io.FileOutp ...

  3. 第二篇：服务消费者（RestTemplate+ribbon）

    第一篇讲了服务的注册,这篇来说说服务的调用,服务与服务的通讯是基于http restful,springcloud的服务调用是通过ribbon方式的,客户端的负载均衡. Talk is cheap.S ...

  4. 2-2 Todolist简单案例

     用v-on,v-for,v-model实现简单的Todolist案例

  5. 记hangfire后台任务运行一段时间后不运行了。

    什么是Hangfire Hangfire 是一个开源的.NET任务调度框架,目前1.6+版本已支持.NET Core.个人认为它最大特点在于内置提供集成化的控制台,方便后台查看及监控. https:/ ...

  6. 同时使用 Ant Design of React 中 Mention 和 Form

    使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能. 具体效果为: 遇到的问题: 1.希望 ...

  7. Java 单元测试顺序执行

    坑死我了,原来@Before会执行多次. 通过函数名可以实现顺序执行,执行顺序和函数的位置无关. import org.junit.Before; import org.junit.BeforeCla ...

  8. 安装mysql.zip文件教程（包含常见问题修复）

    参考链接: https://jingyan.baidu.com/article/63f236284aca280208ab3dcc.html https://jingyan.baidu.com/arti ...

  9. Mysql 用户权限管理

    1. MySQL 权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表,我当前的版本mysql 5.7.22 . mysql权限表 ...

  10. IDEA之Git分支以及Stash使用

    访问我的博客 随着公司开发人员的增加,以及多需求的并行开发,功能上线就会碍手碍脚:害怕自己没写完的代码被别人部署到线上,害怕别人代码没写完被自己部署到线上:总之功能上线之前还要和所有开发沟通,能不能部 ...