网页设计真的越来越好玩了！到处都是滑块。不过有时候是不是觉得有点儿烦？别担心，今儿个就教你一个小技巧，轻轻松松搞定滑块，让网页滑动起来更流畅！
一、CSS的overflow属性控制滚动条
来加个 overflow属性到CSS，再多内容也不怕！实在没地方塞的时候，它们也不会乱跑乱动！这个属性有4种选择：完整显示、隐藏、拉伸边界和自动展开。亲们可能要说，我想隐藏些什么或者让页面滚动起来怎么办？放心超出范围的内容会自动隐形。再说，网页里的东西再多也好办，有滑轮帮你轻松浏览~再告诉你们个好消息，用scroll的参数设置，你可以控制滑轮出现的时机，还不影响页面美感~
想要元素宽高不变，但内容超过咋办？不怕，把overflow改成”scroll”就行，马上就能看见滑块咯。觉得自动加滑块太费劲儿？试试”auto”，浏览器自己解决，看不到滑块也不影响浏览。要不你就把它关了，设成”hidden”，就是这么简单。但这么一来，以后可能就没法滑动查看网页里的东西了。
二、JavaScript解决隐藏滚动条仍能滚动的问题
咱们来聊聊”overflow:hidden”是怎么遮住滑动条的？但你可能会遇到网页内容还在偷偷下滑的情况。别急，这用JavaScript就能搞定了！不过也别忘了注意看看用户们用的都是哪些设备，毕竟手机屏幕小，滑动条太大看着很扎眼的。
这招简单得很，就是让你随心所欲地用电脑或手机浏览网页！就在网页上添加几行代码就搞定，前后翻页轻而易举。而且，还记得吗？要是你用的是iPhone，同样能感受到和iOS系统一模一样的滚轮效果！无论你点哪儿都能快速转换，想看哪就看哪！
$('body').css({
'overflow-y': 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
三、CSS实现类iOS效果
$('body').css('overflow-y', 'scroll');
其实，你知道吗？用CSS也能弄出这个效果，根本不用费劲去找麻烦的JavaScript。先定好元素大小，然后用“overflow: hidden”把滑动条给掩盖住；最后别忘了加上个”-webkit-overflow-scrolling:touch”，这样一来它就能自己跑动咯！
今儿咱们就来讲讲如何让滚动条消失但还是能滑动，有俩方法，一是用 overflow 属性，二是用 JavaScript，要说JavaScript功能强大什么都能搞定；如果就想简简单单地藏好滑动条还保留滑动感，那就选用 CSS。
评论0