通常情况下设置完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. MongoDB 博客截图之一

    来源:十天掌握MongoDB之三:学会Find - 学吧网 - 专注于PHP资源分享

  2. 关于XML学习

    XML为知识构架存储语言: http://www.w3school.com.cn/xml/xml_tree.asp 语义网:为计算机构建一个系统的概念网络模型是计算机理解概念和机间信息交流的途径:XM ...

  3. C# DataTable 转 json

    public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { //窗体 ...

  4. angular.js表单验证

    表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...

  5. 资深程序员总结:彻底理解Spring容器和应用上下文

    点关注,不迷路:持续更新Java架构相关技术及资讯热文!!! 有了Spring之后,通过依赖注入的方式,我们的业务代码不用自己管理关联对象的生命周期.业务代码只需要按照业务本身的流程,走啊走啊,走到哪 ...

  6. java操作Excel的poi的简介

    一.POI概述 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 结构: HSSF - 提供读写Mi ...

  7. 当使用junit4 对spring框架中controller/service/mapper各层进行测试时,需要添加的配置

    @RunWith(SpringJUnit4ClassRunner.class) @WebAppConfiguration @ContextConfiguration(locations = {&quo ...

  8. WTM

    WTM的由来 WalkingTec.Mvvm框架(简称WTM)最早开发与2013年,基于Asp.net MVC3 和 最早的Entity Framework, 当初主要是为了解决公司内部开发效率低,代 ...

  9. laravel 运行migrate报错 1071 Specified key was too long

     转自:https://segmentfault.com/a/1190000008416200 laravel运行命令migrate时报错: 1071 Specified key was too lo ...

  10. POJ 2115 C Looooops( 简单拓欧 + 快速幂 )

    链接:传送门 题意:题目中给出一个循环 for (variable = A; variable != B; variable += C) ,这个东东还需要 mod 2^k 问至少多次能退出,如果进入死 ...