CSS实现隐藏滚动条并可以滚动内容
方法一:
计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码:
<div class="outer-container">
<div class="inner-container">
......
</div>
</div>
.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
方法二:
使用三个容器包围起来,不需要计算滚动条的宽度,该代码最早是在Microsoft博客上看到的,跟我上面的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动,代码如下:
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
方法三:
css隐藏滚动条,同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }
转自大佬文章:GO>>>
CSS实现隐藏滚动条并可以滚动内容的更多相关文章
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
- CSS 实现隐藏滚动条同时又可以滚动(转)
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- CSS怎么隐藏滚动条(三种方法)
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- CSS 实现隐藏滚动条同时又可以滚动
方法1: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...
- css隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
- css 如何隐藏滚动条
原理: 把滚动条设为完全透明: /* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;} /* 滚动槽 */::-webkit-scrollbar-track ...
随机推荐
- PL/SQL语法
PL/SQL语法 由于pl/sql是编译后执行的,而sql语句是未经编译的,因此pl/sql语句在执行速度上更快,同时也减少了客户机和服务器的传输. 基本结构 DECLARE 声明变量.常量.用户定义 ...
- linux 之管道命令与重定向
一.Linux重定向 重定向能够实现Linux命令的输入输出与文件之间重定向,以及实现将多个命令组合起来实现更加强大的命令.这部分涉及到的比较多的命令主要有: 涉及到的比较多的命令主要有: cat:连 ...
- PHP利用百度ai实现文本和图片审核
之前做平台内容发布审核都是自己构建一套违禁词库,在代码中利用词库判断用户发布的内容,现在可以使用百度ai api完成这个功能.接下来就简单说下怎么做吧: 首先打开百度ai 开发平台 注册一个账号: 注 ...
- 剑指offer 1-5
二维数组中的查找 题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中 ...
- 第九章 身体质量指数BMI的python实现
身体质量指数BMI:对身体质量的刻画(Body Mass Index) 国际上常用的衡量人体肥胖和健康程度的重要标准,主要用于统计分析 定义: BMI=体重(kg)/身高^2(m2) 提出问题: 实例 ...
- scrapy-redis的搭建 分布式爬虫 去重
master:一.spider文件1.需要更改继承的类from scrapy_redis.spiders import RedisSpider 2.注释掉start_urls 3.在爬虫目录下新创建一 ...
- Qt5MV自定义模型与实例浅析
1. Model/View结构 这种结构,其实就是将界面组件与所编辑的数据分离开来,又通过数据源的方式连接起来,相当于解耦,视图层只关心显示和与用户交互,而数据层负责与实际的数据进行通信,并为视图组件 ...
- SLAM的数学基础(2):协方差和协方差矩阵
之前我们知道,方差是一组数据的离散程度,它的公式为: 那么如果我们有几组数据,需要知道这几组数据的协同性呢? 举个例子,还是在小红,几次考试成绩如下: 入学考试:数学:80,语文:80 期中考试:数学 ...
- Kubernetes实战:高可用集群的搭建和部署
摘要:官方只提到了一句"使用负载均衡器将 apiserver 暴露给工作节点",而这恰恰是部署过程中需要解决的重点问题. 本文分享自华为云社区<Kubernetes 高可用集 ...
- fork、父进程和子进程
进程 什么是进程?进程是一个运行中的程序实体,拥有独立的堆栈.内存空间和逻辑控制流. 这是标准的进程概念.让我们通过操作系统的fork函数看看这个抽象的概念是怎么在进程的实现中体现出来的. 构成要素 ...