美文网首页H5
取消overflow-scroll的滚动条

取消overflow-scroll的滚动条

作者: 泪滴在琴上 | 来源:发表于2019-08-13 09:19 被阅读4次

通常情况下设置完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之后,就会在页面中出现滚动条,下边的方法可以取消掉此滚动条: con...

  • collectionView

    // 取消弹簧效果self.collectionView.bounces = NO;// 取消水平滚动条self....

  • iOS中tableView常用属性设置

    一、tableView的属性1.取消cell的分割线 2.取消tableView右侧的滚动条 3.当tablevi...

  • ListView使用技巧

    ListView常用技巧 隐藏ListView的滚动条 取消ListView的item点击效果 设置ListVIe...

  • WebView的几种用法

    // 取消右侧,下侧滚动条,去处上下滚动边界的黑色背景 _webView.delegate=self; _webV...

  • 一些CSS样式

    设置input 的placeholder的字体样式 设置input聚焦时的样式 取消input的边框 隐藏滚动条或...

  • ionic横向滚动

    html 注:需要添加overflow-scroll="true",否则在横向滚动区域内不能垂直滚动 css

  • 关于wkwebview滚动条的隐藏

    之前UI要求取消滚动条,对于wkWebview,没有很好的css属性去掉这个东西,最后是前端统一由组件方面处理的。...

  • ionic自动触发下拉刷新

    需求 双击ionic底部导航栏,相应页面出现下拉刷新效果 html 注:overflow-scroll="fals...

  • Mac的常用设置

    1.滚动条 反向设置系统偏好设置/鼠标/ 取消滚动方向 2.触摸板 三指、四指系统偏好设置/辅助功能/指针...

网友评论

    本文标题:取消overflow-scroll的滚动条

    本文链接:https://www.haomeiwen.com/subject/chomjctx.html