div ie无效 隐藏滚动条_前端(浏览器兼容性Ie与chrome)之滚动条的隐藏

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

一、使用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浏览器也可以对滚动条样式进行设置,但是只能对滚动条的颜色这一项进行设置。代码如下:

#content{

/*三角箭头的颜色*/scrollbar-arrow-color:#fff;

/*滚动条滑块按钮的颜色*/scrollbar-face-color:#0099dd;

/*滚动条整体颜色*/scrollbar-highlight-color:#0099dd;

/*滚动条阴影*/scrollbar-shadow-color:#0099dd;

/*滚动条轨道颜色*/scrollbar-track-color:#0066ff;

/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/scrollbar-3dlight-color:#0099dd;

/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/scrollbar-darkshadow-color:#0099dd;

/*滚动条基准颜色*/scrollbar-base-color:#0099dd;

}

而为了应对不同浏览器之间的兼容性,我们要采用第二种方法,接下来请看第二种方法。

二、在滚动区域外在嵌套一层空白div,该层div有宽高,宽度应当小于滚动区域一个滚动条的宽度,设置外层overflow为hidden 溢出部分不显示,这样一来滚动条的部分已经在外层空间溢出,根据设定,将不再页面显示了。如下:

这里Chrome和IE浏览器滚动条默认宽度都是17px,所以外层比滚动层宽度少17px。

}.scroll{width:117px;height:600px;overflow:auto;

}.red{width:100%;height:50%;background-color:red;

}.green{width:100%;height:50%;background-color:green;

}.blue{width:100%;height:50%;background-color:blue;

}

1

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

爱河难浴

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值