代码：（原理就是遮盖）

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. [置顶] 利用Global.asax的Application_BeginRequest 实现url 重写 无后缀

    利用Global.asax的Application_BeginRequest 实现url 重写 无后缀 <%@ Application Language="C#" %> ...

  2. 使用 Shell 脚本自动化 Linux 系统维护任务

    如果一个系统管理员花费大量的时间解决问题以及做重复的工作,你就应该怀疑他这么做是否正确.一个高效的系统管理员应该制定一个计划使得其尽量花费少的时间去做重复的工作.因此尽管看起来他没有做很多的工作,但那 ...

  3. Hyper-V如何应用新的网卡

    最近新装了块网卡,可是在Hyper-V的虚拟机设置里怎么也找不到如何应用这个新网卡.   把我郁闷坏了. 偶尔点点,才发现原来不是在虚拟机的设置里面,而是在上面的一级设置. 新建完后就可以在虚拟机的网 ...

  4. PasswordlessAPI

    passwordlessapiYOURLS允许API调用的老式的方法,使用用户名和密码参数(如果你的设置是私人的,很明显).如果担心将证书发送到野外,还可以使用秘密签名令牌进行API调用.签名的令牌你 ...

  5. Lisp分配给保护的符号…

    在进行调试时,弹出"分配给保护的符号:pf,是否进入中断循环",但似乎不会影响结果. 明经版主解译说是:给受保护的符号重新赋值了,所以有此提示,此提示仅在打开了vlide 编辑器才 ...

  6. 别人的spring学习入门笔记

    http://elf8848.iteye.com/blog/875830  可以做入门参考,英语好可以阅读spring的spring-framework-reference 更多学习blog http ...

  7. 自定义AppServer

    TelnetSever.cs public class TelnetServer : AppServer<TelnetSession> { protected override bool ...

  8. RDD转换成DataFrames

    官方提供了2种方法 1.利用反射来推断包含特定类型对象的RDD的schema.这种方法会简化代码并且在你已经知道schema的时候非常适用. 先创建一个bean类 case class Person( ...

  9. iOS点击获取短信验证码按钮

    概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...

  10. 关于android屏幕适配的问题（drawable-xxxxxxxx，dp，sp，px等等），偶尔看到了android源代码，关于dpi的区分的值

    上一篇博客说了一下.9.png图片http://blog.csdn.net/qq_23195583/article/details/46737419 当然,点九的是指的能够进行拉伸的.那么假设图片不能 ...