HTML - 隐藏滚动条但可以滚动
代码：（原理就是遮盖）
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 - 隐藏滚动条但可以滚动的更多相关文章
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
- 3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- css隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
- HTML5 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
- CSS 实现隐藏滚动条同时又可以滚动（转）
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- CSS元素超出部分滚动，并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
- CSS隐藏overflow默认滚动条同时保留滚动效果
主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...
随机推荐
- 搜狐视频Redis私有云平台CacheCloud
一.CacheCloud是做什么的 CacheCloud提供一个Redis云管理平台:实现多种类型(Redis Standalone.Redis Sentinel.Redis Cluster)自动部署 ...
- Cognos创建Oracle数据源错误以及客户端生成加密信息错误
报加密错误,先删除 signkeypair csk encrytkeypair三个目录错误一: 创建Oracle数据源错误,在cognos connection中创建oracle的数据源,一直测试不成 ...
- 织梦DeDeCms会员登录或退出跳转到首页的修改方法
会员在主页登陆后,默认会跳转到会员中心,如果我们想登陆后,跳转到网站主页,那么就请参考下面的方法实现织梦DeDeCms会员登录或退出跳转到首页. 1.在根目录的member目录中找到index_do. ...
- photoshop 去掉gif水印
先贴上未去除水印的GIF图片!~ 打开选中需要处理的“gif文件” 下面就以动图给大家介绍一下: 首先勾选 时间轴和图层 第二步(选择区域) 第三步(选择水印区域),选择完了以后按Enter 选中第一 ...
- 谷歌地图api訪问失败
在非外网情况下.我们调用谷歌api会出现载入不到地图的现象.此时能够换一下域名试试或许就好了 比方我自己訪问api时时这样写的: https://maps.googleapis.com/maps/ap ...
- caffe 代码阅读笔记1
首先查看caffe.cpp里的train函数: // Train / Finetune a model. //训练,微调一个网络模型 int train() { // google的glog库,检查- ...
- 【Oracle】RAC 10.2.0.1升级10.2.0.5
环境: OS:OEL5.6 RAC:10.2.0.1.0 相关环境变量: CRS_HOME /u01/app/oracle/product/10.2.0/db_1 ORACLE_HOME /u01 ...
- inode备忘
文件名 -> inode -> device block 转自:http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一 ...
- win10开启IE11企业模式
.右击任务栏开始按钮,选择“运行”,打开运行框(或使用组合键Win+R打开运行) .输入gpedit.msc,进入“本地组策略编辑器”(注:该功能不支持Win8/Win8.1核心版.需要Win8/Wi ...
- java发送email(含代理方式，ssl方式，传统方式)
package spring.vhostall.com; import java.security.Security; import java.util.Date; import java.util. ...