使用CSS实现无滚动条滚动

编程之家收集整理的这篇文章主要介绍了使用CSS实现无滚动条滚动编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的,但存在的问题是:页面或元素失去了滚动的特性,进而溢出内容也变得不可见,这样肯定是不可取的。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?

接下来小萌介绍几种简单的方法,但是也不是完美的解决问题了,各求所需吧

第一种:伪对象选择器

在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义

1 ::-webkit-scrollbar{
2 display:none;(或者是width: 0;)
3 }

不过目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。

第二种:变相隐藏

大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width,就是用一个无滚动条的div包裹另一个有滚动条的div,从而实现隐藏滚动条的效果
例子:

 1 <!DOCTYPE html>
 2 <html 3  
 4     head 5         title>使用CSS实现无滚动条滚动</ 6  
 7         Meta charset="UTF-8" 8         style type="text/css" 9             body,html {
10                 margin: 0;
11                 padding12                 height 100%13                 overflow hidden14             }
15             ul,li 16 17 18                 list-style none19             20             .Box_wrap 21  20px auto22                 width 200px23  400px24                 border 1px solid #ccc25 26             27             .Box_wrap ul  28  220px;/* 多出20像素是滚动条的位置,会被父容器盖住就看不到了 */
29 30                 overflow-x31                 overflow-y auto32             33             .Box_wrap ul li 34 35  40px36                 line-height37                 border-bottom38                 font-size 12px39                 text-align center40             41         style42     43  
44     body45         div class="Box_wrap"46             ul47                 li>测试数据148                 >测试数据249                 >测试数据350                 >测试数据451                 >测试数据552                 >测试数据653                 >测试数据754                 >测试数据855                 >测试数据956                 >测试数据1057                 >测试数据1158                 >测试数据1259                 >测试数据1360                 >测试数据1461                 >测试数据1562                 >测试数据1663                 >测试数据1764                 >测试数据1865                 >测试数据1966                 >测试数据2067                 >测试数据2168                 >测试数据2269                 >测试数据2370                 >测试数据2471                 >测试数据2572                 >测试数据2673                 >测试数据2774                 >测试数据2875                 >测试数据2976                 >测试数据3077             78         div79     80  
81 >

感觉大家阅读到这里~~~

总结

以上是编程之家为你收集整理的使用CSS实现无滚动条滚动全部内容,希望文章能够帮你解决使用CSS实现无滚动条滚动所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。 CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。 概述 看一段比
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注