CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
方法1:计算滚动条宽度并隐藏起来
在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。
演示
下面给一个简化版的代码
|
这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。
方法2:使用三个容器包围起来,不需要计算滚动条的宽度
该代码最早是在Microsoft博客上看到的,跟我上面的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
代码如下:
|
方法3:css隐藏滚动条
同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。
那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式
chrome 和Safari
|
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)相关推荐
- CSS实现隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- CSS实现隐藏滚动条但可以滚动
今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动. 通过设置高和voerflow,实现滚动条效果: . pa ...
- java中打印输出数组内容的三种方式
今天输出数组遇到问题,学习一下打印输出数组内容的几种方式 错误示范:System.out.println(array); //这样输出的是数组的首地址,而不能打印出数组数据.(唉,我开始就是这么写的. ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...
- CSS实现隐藏滚动条并保留滚动功能
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- html+ul隐藏滚动条,2种方法实现CSS隐藏滚动条并可以滚动内容的方法
方法1:计算滚动条宽度并隐藏起来 html代码: Loremipsumdolorsitamet,consecteturadipiscingelit.Integervehiculaquamnibh,eu ...
- CSS实现隐藏滚动条但是可以滚动
代码 body::-webkit-scrollbar {display: none; } 示例 css选择器::-webkit-scrollbar {display: none; }
- 黄聪:C#获取网页HTML内容的三种方式
C#通常有三种方法获取网页内容,使用WebClient.WebBrowser或者HttpWebRequest/HttpWebResponse. 方法一:使用WebClient static void ...
最新文章
- Frogger--POJ 2253
- spring与memcache的整合
- Javascript - Jquery - 事件
- mysql group replication 安装配置详解
- Ubuntu根目录空间不足
- 路由器LED闪灯泄露数据
- (32)System Verilog类class中构造函数new()示例
- Spring通过静态方法factory-method或实例工厂factory-bean获取bean对象
- 通过实例学习编写需求文档 【转】
- 两种预处理命令的写法的区别
- 17万字 | 2021密码应用技术白皮书(附下载)
- 香橙派进入系统后设置ip
- 国美在线php面试题,国美销售专员的面试考题
- VC写的手机qq聊天记录导出工具
- 围棋的基本下法与规则
- 利用Autolisp提取天正墙体位置坐标
- Python+Vue计算机毕业设计网上美妆购物商城8k7w5(源码+程序+LW+部署)
- Pig 更新: 发布 0.7 版本
- Win10右下角小图标怎么叠起来?
- netcat工具简单使用
热门文章
- android线程池断点续传,Android之多线程下载及断点续传
- Day23 - 静态资源和Ajax请求
- Maven私库搭建 和 Gitlab搭建
- @高三--我的一些语录,一些心情。上课无聊,写在草稿本上的
- 学会批处理,用心学很容易!
- JSLint for Eclipse
- Office 365 SD-WAN网络加速解决方案
- janusgraph整合mysql_JanusGraph的schema及数据建模
- 食品分类图标_食品标识大全
- 被女朋友三番两次拉黑后,我用 Python 写了个“舔狗”必备神器!