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

最新推荐文章于 2024-06-05 09:46:36 发布

ad775202

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量556

点赞数

文章标签： c#

原文链接：http://www.cnblogs.com/belove8013/p/6656675.html

版权

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

最低0.47元/天解锁文章

ad775202

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何隐藏滚动条还能实现滚动的功能

有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于pc端、也适用与移动端。第一种方案，通过样式来隐藏原生的滚动条，下面提供了两种方式，但是这样会导致偶现原生样式的情况<!doctype html><html lang="en"><head> ...
复制链接

扫一扫