代码：（原理就是遮盖）

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. ListView GridViewColumn.CellTemplate

    <ListView.View> <GridView> <GridViewColumn Header="Meaningful Use Objectives&quo ...

  2. Foreda8上安装Ant1.9.2

    Ant在Win上安装很简单,解压拷贝+设置Ant_Home,在Linux上差不多也是这两步. 首先下载apache-ant-1.9.2-bin.tar.gz. 然后解压tar xvzf apache- ...

  3. asp.net网站项目调用page，或者ashx页面不能用反射

    public class TestHandler : System.Web.IHttpHandler { public bool IsReusable { get { return false; } ...

  4. 日媒：阿里巴巴上市融资或超Facebook

    <日本经济新闻>4月22日报导称, 越来越多观念以为,正准备在美国股票商场上市的阿里巴巴集团的融资额将超越美国Facebook.假如完毕,作为互联网公司将创出融资额的历史新高.阿里巴巴现已 ...

  5. 批量合并GDB

    在实际操作中,经常对数据库文件进行合并.裁切等.如果遇到gdb比较多,要素层比较多,而且还存在数据集.虽然ArcGIS中的批量处理的功能,但填写参数过程也比较麻烦,如果一次性处理过多,程序容易停止工作 ...

  6. php之快速入门学习-9(switch)

    PHP Switch 语句 switch 语句用于根据多个不同条件执行不同动作. PHP Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 switch 语句. <?php sw ...

  7. php之快速入门学习-8(if-else)

    PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...

  8. 【Qt】splitter

    一段简单的切割窗体的程序: <span style="font-size:18px;">#include "mainwindow.h" #inclu ...

  9. $stateParams 详解

     如何传递参数(参考 http://www.cnblogs.com/jager/p/5293225.html) 首先,要在目标页面定义接受的参数: 传参, ui-sref: $state.go: 接收 ...

  10. Codevs3008 加工生产调度

    题目大意:某工厂收到了n个产品的订单,这n个产品分别在A.B两个车间加工,而且必须先在A车间加工后才干够到B车间加工. 求如何安排这n个产品的加工顺序.才干使总的加工时间最短. 这里所说的加工时间是指 ...