如何隐藏滚动条还能实现滚动的功能

时间：2024-03-11 15:32:03

有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于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>

如果项目需要，当然也可以通过控制函数的方式来控制快滑与慢滑的操作，以达到更好的适应移动端的效果

相关文章