方法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. Android 音乐(音效)播放方式总结

    一.音效的分类 音效按照作用的不同,可以将音效分为即时音效和背景音乐.两种音效在Android中的实现技术是不同的. 主要的实现方式为:SoundPool.MediaPlayer. 区别在于,Medi ...

  2. Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型

    除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...

  3. Qt之实现360安全卫士主界面代码开源

    匆匆一年又过去了,总结去年一年的节奏就是忙爆了:生活忙.工作忙,值得庆幸的是没有瞎忙:今天打开博客园查看我的博客,才发现几乎差不多一年时间没写博客了:博客文章就是记忆,就是曾经努力过的见证,感谢博客园 ...

  4. python中两种栈实现方式的性能对比

    在计算机的世界中,同一个问题,使用不同的数据结构和算法实现,所使用的资源有很大差别 为了方便量化python中算法的资源消耗,对性能做测试非常有必要,这里针对stack做了python语言 下的性能分 ...

  5. Shell - 简明Shell入门14 - 操作符（Operator）

    示例脚本及注释 #!/bin/bash echo "No code, just some comments." # ### 通配符 # * 代表任意(0个或多个)字符 # ? 代表 ...

  6. Spark 的 Shuffle过程介绍`

    Spark的Shuffle过程介绍 Shuffle Writer Spark丰富了任务类型,有些任务之间数据流转不需要通过Shuffle,但是有些任务之间还是需要通过Shuffle来传递数据,比如wi ...

  7. [Leetcode]827.使用回溯+标记解决最大人工岛问题

    在二维地图上, 0代表海洋, 1代表陆地,我们最多只能将一格 0 海洋变成 1变成陆地. 进行填海之后,地图上最大的岛屿面积是多少?(上.下.左.右四个方向相连的 1 可形成岛屿) 示例 1: 输入: ...

  8. java实现网页结构分析列表发现

    现在的网站千奇百怪,什么样格式的都有,需要提取网页中的列表数据,有时候挨个分析处理很头疼,本文是一个页面结构分析的程序,可以分析处理页面大致列表结构. 废话不多说,我也不会说,show me code ...

  9. Android_support_v4和V7

    google提供了Android Support Library package 系列的包来保证来高版本sdk开发的向下兼容性,即我们用4.x开发时,在1.6等版本上,可以使用高版本的有些特性,如Fr ...

  10. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...