无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

css隐藏滚动条scrollbar样式 但能滚动(解决兼容性问题)

前端 Micheal 1年前 (2023-11-23) 223次浏览 已收录 0个评论 扫描二维码

css隐藏滚动条scrollbar样式 但能滚动

在我们进行网站开发时,可能会有为了保持网站的美观和整洁性而想要隐藏滚动条的想法。在最近的网站开发过程中,我就曾碰到过这个问题。针对这个问题也进行了相应的研究学习,整理了如下的几个思路:

一、使用CSS样式来解决(Chrome浏览器

#content::-webkit-scrollbar { /*此处设置滚动条的宽度和高度,宽度为纵向滚动条设置,高度为横向滚动条设置,设置为0的滚动条消失*/
        width: 4px;     
        height: 4px;
        }
        #content::-webkit-scrollbar-thumb {/*滚动条滑块样式*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
        }
    #content::-webkit-scrollbar-track {/*滚动条轨道样式*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }

  在Chrome浏览器中,只要把你的滚动区域加上上述代码,就可以对滚动条的样式进行设置了。然而这种方法只对Chrome浏览器有效,对于IE浏览器,使用上述代码是没有任何效果的。当然IE浏览器也可以对滚动条样式进行设置,但是只能对滚动条的颜色这一项进行设置。代码如下:

点击展开
喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到