方法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. 3.html基础标签:表格

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

  2. C++数组,sort

    cmake_minimum_required(VERSION 3.5) project(Test) add_executable( te test.cpp ) test.cpp #include &l ...

  3. [CocoaPods]使用Pod Lib创建

    入门 我们将使用pod lib create引导过程来创建整个pod .那么让我们从初始命令开始: pod lib create MyLibrary 注意:要使用您自己的pod-template,您可 ...

  4. 视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频

      视频下载四大神器—如何下载优酷/爱奇艺/腾讯/B站超清无水印视频  2018-07-11 |  标签»下载, 下载工具, 视频 又是视频下载,老生常谈的话题.阿刚同学已在乐软博客多次与大家分享推荐 ...

  5. Python: Ubuntu 安装numpy,scipy,matplotlib

    安装python-dev 安装这个包,以后安装各种python扩展包,可以省很多事情. sudo apt-get install python-dev 使用apt-get 安装 只需要下面的几个命令即 ...

  6. 14-使用glusterfs做持久化存储

    使用glusterfs做持久化存储 我们复用kubernetes的三台主机做glusterfs存储. 以下步骤参考自:https://www.xf80.com/2017/04/21/kubernete ...

  7. [EXP]Drupal < 8.6.10 / < 8.5.11 - REST Module Remote Code Execution

    Analyzing the patch By diffing Drupal and , we can see that in the REST module, FieldItemNormalizer ...

  8. Linux学习笔记之十一————Linux常用服务器构建之ssh和scp

    一.ssh 1.ssh介绍 SSH为Secure Shell的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议. ...

  9. openshift上使用devicemapper

    环境:openshift v3.6.173.0.5 openshift上devicemapper与官方文档中的描述略有不同,在官方文档的描述中,容器使用的lvm文件系统挂载在/var/lib/devi ...

  10. centos7环境开启WIFI热点

    1.环境介绍 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@localhost ~]# u ...