通常情况下设置完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的滚动条的更多相关文章

  1. 如何隐藏overflow: scroll的滚动条

    css3有一个直接调用的css,保证隐藏滚动条的同时还可以继续通过滚轮向下翻 ::-webkit-scrollbar { /*隐藏滚轮*/ display: none; } 但是仅限于支持css3的浏 ...

  2. overflow:scroll 滚动条不显示

    overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大

  3. iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)

    移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...

  4. 【转】window.scroll 浏览器滚动条的参数总结

    如内容超出单元格,则隐藏style="TABLE-LAYOUT: fixed" 让弹出窗口总是在最上面: <body onblur="this.focus();&q ...

  5. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  6. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  7. 通过overflow: scroll;来实现部分区域的滚动

    在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...

  8. 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  9. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  10. 父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素

    <div class="a"> <div class="b"> <div class="c">内容内容, ...

随机推荐

  1. 函数GROUP_CONCAT

    这不得不说是mysql中一个特别好用的函数,之前生写这种确实好麻烦..感谢mysql有了这么好的函数..嘿嘿 举个例子吧. s_student 表 stuinfo表 sql如下: ok,简单粗暴,就这 ...

  2. JDBCUtils 工具类

    import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSource;import java.io.IOE ...

  3. __str__和__repr__

    Python 中的 __str__ 与 __repr__ 到底有什么差别   很多时候我们自己编写一个类,在将它的实例在终端上打印或查看的时候,我们往往会看到一个不太满意的结果. 类默认转化的字符串基 ...

  4. Nginx部署静态资源(及root与alias区别)

    root目录与alias目录的区别Nginx路径location配置中,使用root目录与alias目录的区别 1)alias指定的目录是准确的,即location匹配访问的path目录下的文件直接是 ...

  5. Django:URL,Views,Template,Models

    准备工作:熟悉Django命令行工具 django-admin.py 是Django的一个用于管理任务的命令行工具,常用的命令整理如下: <1> 创建一个django工程 : django ...

  6. HDU1114 - Piggy-Bank

    Before ACM can do anything, a budget must be prepared and the necessary financial support obtained. ...

  7. preload、prefetch的认识

    预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...

  8. 正确判断js数据类型 总结记录

    正确判断js数据类型 总结记录 判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. 三方库. js六大数据类型 number: 数 ...

  9. 利用Selenium实现图片文件上传的两种方式介绍

    在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...

  10. 03springMVC注解式控制器开发

    注解式控制器开发简介 注解式控制器开发HelloWorld HelloWorld的运行流程 处理器定义 REST简介 URL路径映射 数据绑定 不同的Model有相同的属性的处理 静态资源的处理 1  ...