取消overflow-scroll的滚动条
通常情况下设置完overflow:scroll之后,就会在页面中出现滚动条,下边的方法可以取消掉此滚动条:
container为当前设置overflow:scroll的元素
1、使用以下CSS可以隐藏滚动条:
.container::-webkit-scrollbar {display:none}
但是要兼容其他浏览器的话这个就不太好用了,这个适用于Chrome
2、为了兼容其他的浏览器,可以用这样的方法:
在滚动区域外再套一层div,给这层div设置overflow: hidden,即可隐藏滚动条
//给container外层加一个div(container-wrapper) .container-wrapper{overflow: hidden}
可是,经过我的测试,这个方法虽然兼容了其他的浏览器,但是移动端我发现用微信打开这个页面,依旧存在一个很丑的默认样式的滚动条。
3、这种情况下,可以给container设置一个padding-bottom(根据滚动条的位置来设置,我的container是overflow-x: scroll),把滚动条挤出可视范围,这样在视觉上相当于把滚动条隐藏起来了
container{
overflow-x: scroll;
overflow-y: hidden;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
padding-bottom: 25px;
}
取消overflow-scroll的滚动条的更多相关文章
- 如何隐藏overflow: scroll的滚动条
css3有一个直接调用的css,保证隐藏滚动条的同时还可以继续通过滚轮向下翻 ::-webkit-scrollbar { /*隐藏滚轮*/ display: none; } 但是仅限于支持css3的浏 ...
- overflow:scroll 滚动条不显示
overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大
- iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)
移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...
- 【转】window.scroll 浏览器滚动条的参数总结
如内容超出单元格,则隐藏style="TABLE-LAYOUT: fixed" 让弹出窗口总是在最上面: <body onblur="this.focus();&q ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 通过overflow: scroll;来实现部分区域的滚动
在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...
- 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题
解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...
- 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...
- 父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素
<div class="a"> <div class="b"> <div class="c">内容内容, ...
随机推荐
- a better git log
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d ...
- JAVA(TOMCAT)远程调试
当我们的项目部署到远程机器(开发环境和部署环境在不同的jvm下)中,而远程机器的数据和本地有可能不一样,这个时候我们可能需要连接到远程机器进行调试.为了解决这一问题,JAVA为我们提供了Java平台调 ...
- Java代码运用及算法思路养成——用*号输出形状
简单的了解了一些循环算法后,尝试用循环算法,输出形状图形 例1矩形与平行四边形的比较(可以看做矩形的每一行在输出前都输出了矩形长度数量-1的空格数量并且依次递减) 例2三角形(三角形可看做半个矩形,考 ...
- 05《UML大战需求分析》之五
调研需求的时候,用户会说这个软件要具备怎样的功能,能做什么事情等,这些是功能性的需求.部署图和构件图是用来描述软件架构的,但是我又怀疑软件需求调研也需要确定软件架构吗? 我阅读了一个例子,一个软件公司 ...
- 自定义View实现圆角化
目的: 1.实现自定义ReleativeLayout圆角化 实现: 1.在res目录中新建attrs.xml文件,自定义属性如下. <?xml version="1.0" e ...
- struct timeval和gettimeofday
struct timeval和gettimeofday() struct timeval结构体在time.h中的定义为: struct timeval { time_t tv_sec; /* Seco ...
- SQL Server UPDATE语句的用法详解
SQL Server UPDATE语句用于更新数据,下面就为您详细介绍SQL Server UPDATE语句语法方面的知识,希望可以让您对SQL Server UPDATE语句有更多的了解. 现实应用 ...
- 主题:实战WebService II: SOAP篇(基于php)
概述(SOAP和XML-PRC比较) 在Web服务发展的初期,XML格式化消息的第一个主要用途是,应用于XML-RPC协议,其中RPC代表远程过程调用.在XML远程过程调用 (XML-RPC)中,客户 ...
- 使用canvas保存网页为pdf文件支持跨域
前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubub ...
- flex笔记 - 基础
flex笔记 - 基础 文章中的所有图示代码都放在了github上: 阮一峰flex博客跟学代码 传统的布局解决方案,基于盒模型, 依赖 display, position, float属性来进行布局 ...