关于隐藏原生滚动条的一些事

在页面中让一部分可以滚动很容易

给父元素设置overflow:auto;就行了

这样做虽然简单但是也有很大的问题：原生的滚动条实在是太丑了！！

怎么把原生的滚动条隐藏起来，传统的做法是在：

要设置的overflow：auto，的元素外面在包一层div

在这个div上设置overflow：hide，通过调整该它的宽度，来隐藏掉滚动条；

这样的做法虽然能实现但是还是过于麻烦

C3出来后就直接提供修改滚动条样式的方法

::-webkit-scrollbar {
　　width: 0px;
}

目前仍然存在兼容性问题

但是并不影响它的使用

时间： 2024-10-29 01:26:36

关于隐藏原生滚动条的一些事的相关文章

Element UI 中被隐藏的滚动条

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中. 使用的时候,放在 <el-scrollbar></el-scrollbar> 标签内即可如: <div style="height:100%"> <el-scrollbar class="m-scroll" style="height:100%">

ios移动端原生滚动条滚动不灵敏问题

最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器还是自带浏览器中都会反应迟钝,很难滑动,有的地方干脆不能滑,用户体验很垃圾,查了一些资料后, 找到了这个属性 -webkit-overflow-scrolling : touch; 然后把他加在overflow:auto:处, 完美解决了问题, 使得ios 滚动条的响应速度甚至超过了安卓, 感受只有

css实现无（隐藏）滚动条页面

实现功能:隐藏浏览器滚动条,且不影响鼠标滚轮滚动页面适用:以大图片为背景或产品介绍页面(如果和视差滚动一起使用应该会效果更佳)所需技术:非常简单的css和js 首先来看下对比效果(图1 => 图2,两者都能通过鼠标滚轮进行内容的滚动) (图1) (图2) 可以明显的看到:图2的正文宽度明显比图1的宽度小,并发生了向右的偏移.这就是无滚动条页面的基本原理:移动(设置)正文的偏移量(margin/padding),使正文的滚动条出现在父节点可是范围的外面,以达到无滚动条的效果代码实现HTML节点可

Ubuntu 15.10内建隐藏式滚动条

Ubuntu 15.10(威利狼人)操作系统一大特点是采用来自于上游GNOME的滚动条,这将让很多用户感到高兴.Ubuntu开发者Canonical是做事我行我素的公司,不会过于依赖上游项目,就是为什么我们今天还在使用Unity 7的原因,但是,这并不意味着Canonical完全不依靠GNOME,事实上,Ubuntu开发者仍然大量依靠GNOME.在Ubuntu 15.10(威利狼人)操作系统当中,Canonical就从善如流,放弃了Ubuntu之前版本当中始终显示的滚动条,而是采用来自于GNOM

隐藏SyntaxHighlighter滚动条

最新版SyntaxHighlighter默认Y轴是有滚动条的,但其实高度是自适应,所以Y轴不需要滚动条,而X轴由于要显示正确的行数,所以滚动条我们还是保留,如果不想X轴有滚动条,在编辑代码的时候就要注意每行的代码量. 隐藏Y轴滚动条需要修改 /Syntaxhighlighter/styles/shCoreDefault.css 此样式表,定位到第55行 1 2 3 4 5 6 7 .syntaxhighlighter { width: 100% !important; margin: 1em 0

css - (左右滑动时，隐藏底部滚动条)

先上效果图,如下: 是不是经常看到此类效果? 这里如果不借用其它框架,单纯的利用css 来实现怎么做呢? 1.这一看就要用到overflow,但是用它会有一个默认的滚动条: 2.那么重点来了,怎么解决这个问题呢? 3.用 ::-webkit-scrollbar 就可以很好地解决. 代码如下: css * { padding: 0; margin: 0; } .nav { position: fixed; top: 0; background: white; width: 100%; height

web移动端常用知识点笔记

摘要:因为平时搞移动端的比例多一点,做个小小的总结.虽然网上很多这方面的总结,不过还是想自己也总结一下,适合自己的才是最好的.这样也方便以后自己的查阅 viewport模板——通用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <meta content="width=device-

手机网页布局经验总结

引言众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样的网页是怎样改制作出来的呢?今天我们就来探讨一下这个问题阅读读者具备基础 1.熟练的使用HTML和CSS 2.对HTML5和CSS3有一定的了解,这个不必深入 3.掌握JavaScript.jquery脚本语言如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了 HTML的

web移动端常见问题解决方案

Meta标签: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta content="te