代码：（原理就是遮盖）

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. IIS7.5配置Asp.net项目出现HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理。

    近日在将一个Asp.net项目部署到IIS7.5上时却出现了HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理. 因为IIS里面使用的都是默 ...

  2. https://leetcode-cn.com/

    https://leetcode-cn.com/ 码,马不停蹄,码不停题 英文版:https://leetcode.com/

  3. GIS专业书籍、文档、数据、网站、工具等干货

    整理.分享一些个人整理的GIS专业书籍.文档.数据.网站.工具等.也希望大家将自己的心得也分享出来,一起交流,共同进步. 如果下载链接失效,请到这里去:地信网 一.原理应用类 GIS基础类 01.地理 ...

  4. UITableViewAutomaticDimension

    tableView.rowHeight = UITableViewAUtomaticDimension UITableViewAutomaticDimension is the default val ...

  5. CSS 杂记

    1. z-index: img{ position:absolute; left:0px; top:0px; z-index:-1;} 所有主流浏览器都支持 z-index 属性. 注释:任何的版本的 ...

  6. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  7. 变量名解析：LEGB原则

    # -*- coding: cp936 -*- #python 27 #xiaodeng #变量名解析:LEGB原则 ''' L-----local 局部名字空间 E-----enclosing 直接 ...

  8. Eureka集群试验的一点总结

    先简单描述一下试验: 试验在一台机器上进行,假设有host文件中配置了以下内容 127.0.0.1 left 127.0.0.1 center 127.0.0.1 right 试验中搭建三个注册中心实 ...

  9. Drupal administration theme

    Drupal允许为管理后台设置独立的theme,保存在系统变量variable_get('admin_theme'). Drupal使用全局变量$theme来保存当前请求对应的主题.Drupal在启动 ...

  10. vue-router实现SPA购物APP基本功能

    概述 vue-router是vue中的一个核心插件,用它来实现SPA购物APP基本功能 详细 代码下载:http://www.demodashi.com/demo/10725.html vue-rou ...