代码：（原理就是遮盖）

1、如果你把子div的140px宽度移除，你就明白其中的奥妙了。

2、原理就是父元素负责滚动，子元素负责遮盖。

<html>

<style>

    .scroll{

        overflow-x: hidden; overflow-y: auto;

    }

    .scroll-son{

        overflow-x: hidden;

    }

</style>

<div style="height: 300px;  width: 120px; background:red" class="scroll">

    <div style="height:100%; width: 140px;" class="scroll-son">

        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    </div>

</div>

</html>

HTML - 隐藏滚动条但可以滚动的更多相关文章

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

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

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

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

  3. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

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

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

  5. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

  6. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

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

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

  8. CSS元素超出部分滚动，并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  9. CSS隐藏overflow默认滚动条同时保留滚动效果

    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...

随机推荐

  1. 查询分页-----强势top

    查询分页:语句1性能提升10倍多,仅仅是由于多了个topkeyword,非常不理解啊!!!! 1.查询时间1s内,r_object_id主键 select top 100 * from (  sele ...

  2. Clion安装配置

    1.安装配置MinGW MinGW安装和使用 Windows下利用Cygwin搭建C/C++开发环境GCC 注:分别是使用MinGW和Cygwin两种方法安装GCC环境,据说Cygwin会好一点……我 ...

  3. linux cp覆盖每次都有提示

    1.cp命令,目标已经存在,每次都提示是否覆盖,怎么办? 2.cp --help 可以看到选项-i的时候,才会提示,但是这里并没有-i,为什么每次都有提示? 3.原因是:这里执行的cp是一个别名,通过 ...

  4. Discuz常见大问题-如何使用云采集插件

    在百度中搜discuz 云采集插件(直接在Discuz官方的插件库中搜可能搜不到) 启用这个插件 随后在任意版块发帖的时候,顶部都会有一个文本框,可以直接放别人博客的帖子,点击获取将生成到你发的帖子中 ...

  5. ONVIFclient搜索设备获取rtsp地址开发笔记(精华篇)

    概要:           眼下ONVIF协议家族设备已占领数字监控行业半壁江山以上.亲,作为开发人员的你还在犹豫是否了解下吗?本文介绍了ONVIFclient从设备搜索,鉴权,能力获取,媒体信息获取 ...

  6. 1z0-052 q209_7

    7: In which of the scenarios will the DBA perform recovery? (Choose all that apply.) A.The alert log ...

  7. 关于SimHash去重原理的理解（能力工场小马哥）

    阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...

  8. HDU 4847 陕西邀请赛A(水)

    HDU 4847 Wow! Such Doge! pid=4847" style="">题目链接 题意:给定文本,求有几个doge,不区分大写和小写 思路:水题.直 ...

  9. jsp&html页面知识点集锦

      CreateTime--2016年12月16日16:08:03Author:Marydonjsp&html页面知识点集锦1.标签的class属性 标签同时拥有多个class时,要写在同一个 ...

  10. Linux文件大小排序

    ls 文件详情 ls   -S /            ###从大到小排序ls   -Sr /          ###从小到大排就加个-r     -r 翻转ls   -aSr /         ...