如何隐藏滚动条还能实现滚动的功能
有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于pc端、也适用与移动端。
第一种方案，通过样式来隐藏原生的滚动条，下面提供了两种方式，但是这样会导致偶现原生样式的情况
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法一：隐藏滚动条</title>
<style type="text/css">
/*方法一：隐藏滚动条 */
/*
.box {
margin: 0 auto;
overflow: auto;
width: 800px;
height: 600px;
background: yellow;
}
.inner-box {
width: 100%;
height: 100%;
}
.box::-webkit-scrollbar {
display: none
}*/
/*方法二：增大内部盒子宽度隐藏滚动条 */
.box {
margin:0 auto;
width:800px;
height:600px;
background:yellow;
overflow:hidden;
}
.inner-box{
padding-right:30px;
width: 102%;
height:100%;
overflow-y:auto;
}
/*============= end =================*/
.inner-box ul {
margin: 0;
padding: 0;
width: 100%;
}
.inner-box ul li {
margin: 10% auto;
display: block;
width: 610px;
height: 135px;
background: #4793FF;
list-style: none;
font-size: 7rem;
}
</style>
</head>
<body>
<div class="box">
<div id="innerBox" class="inner-box">
<ul>
<li>
苹果1
</li>
<li>
哈密瓜
</li>
<li>
猕猴桃
</li>
<li>
葡萄
</li>
<li>
圣女果
</li>
<li>
香蕉
</li>
<li>
哈密瓜
</li>
<li>
火龙果
</li>
</ul>
</div>
</div>
</body>
</html>
第二种方案， 通过改变scrollTop来隐藏滚动条并实现滚动的效果
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>控制scrolltop滚动</title> <style type="text/css"> .box { margin: 0 auto; overflow: hidden; width: 800px; height: 500px; background: yellow; } .inner-box { margin: 0; padding: 0; width: 100%; } .inner-box li { margin: 10% auto; display: block; width: 610px; height: 135px; background: #4793FF; list-style: none; font-size: 7rem; } </style> </head> <body> <div class="box"> <ul class="inner-box"> <li> 苹果1 </li> <li> 梨子 </li> <li> 哈哈 </li> <li> 苹果4 </li> <li> 香蕉 </li> <li> 大白*——* </li> <li> 哦哦^_^ </li> </ul> </div> </body> </html> <script> var box = document.querySelector('.box'), touchPosition = {}; // 实时的位置 /** *获取样式 *obj 对象 *name css名称 */ function getClass(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; //IE下获取非行间样式 } else { return getComputedStyle(obj, false)[name]; //FF、Chorme下获取费行间样式 } } //获取触摸点的位置 function getTouchPosition(e) { var touches = e.changedTouches, len = touches.length, touch, tagX, tagY; for (var i = 0; i < len; i++) { touch = touches[i]; tagX = touch.clientX; tagY = touch.clientY; } touchPosition.x = tagX; touchPosition.y = tagY; return touchPosition; }; //获取触摸开始位置 function touchStartFun(e) { touchPosition = getTouchPosition(e); startX = touchPosition.x; startY = touchPosition.y; }; //触摸移动 function touchMoveFun(e) { touchPosition = getTouchPosition(e); // 实时的位置 var moveX = touchPosition.x - startX, moveY = touchPosition.y - startY, touchStartTop = box.scrollTop || document.body.scrollTop; // 移动的方向 竖向偏移量 if (moveY > 0) { if (touchStartTop > moveY) { box.scrollTop = Math.abs(touchStartTop - moveY); } else { box.scrollTop = 0; } } else { box.scrollTop = Math.abs(touchStartTop - moveY); } startY = touchPosition.y; }; function bindtouchEvent() { // 禁用鼠标事件 document.body.setAttribute('onmousewheel', 'return false;'); box.addEventListener('touchstart', touchStartFun, false); box.addEventListener('touchmove', touchMoveFun, false); box.addEventListener('touchend', touchMoveFun, false); } bindtouchEvent(); </script>
如果项目需要，当然也可以通过控制函数的方式来控制快滑与慢滑的操作，以达到更好的适应移动端的效果
