Project, the page needs to show the effect of a page of mobile end effect, using a iPhone style background, ye have not used apples, ye did not dare to describe.
As shown below:
In the Google browser as shown in a scroll bar well hidden, but Firefox on the chart two, with a group of ugly scroll bars.
First on the Google browser resolve the scroll bar codes:
CSS code:
<style>
.tp_box1{
width: 517px;
height: 400px;
/ * Auto beneficial in that direction will have scroll bars in that direction * /
overflow: auto;
}
.tp_box1::-webkit-scrollbar{
display: none;
}
.tp_box2{
width: 100%;
height: 500px;
background: pink;
}
.tp_box3{
width: 100%;
height: 500px;
background: red;
}
.tp_box4{
width: 100%;
height: 500px;
background: black;
}
</style>
HTML code:
<div class="tp_box1">
<div class="tp_box2"></div>
<div class="tp_box3"></div>
<div class="tp_box4"></div>
</div>
The code above diagram a perfect solution to the problem, but this approach is not compatible with Firefox, how to do it? Look at the following code:
CSS code:
<style>
.tp_box{
width: 500px;
height: 400px;
overflow: hidden;
}
.tp_box1{
width: 517px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
}
.tp_box2{
width: 100%;
height: 500px;
background: pink;
}
.tp_box3{
width: 100%;
height: 500px;
background: red;
}
.tp_box4{
width: 100%;
height: 500px;
background: black;
}
</style>
HTML代码：
<div class="tp_box">
<div class="tp_box1">
<div class="tp_box2"></div>
<div class="tp_box3"></div>
<div class="tp_box4"></div>
</div>
</div>
OK兼容都解决了！
一般滚动条默认宽度为17px，我们只需在有滚动条的盒子外面在套一个大盒子，子盒子比大盒子宽度多出17像素即可（这17px刚好存放滚动条位置），比如大盒子设置100px，子盒子设置117px，再给大盒子加上overflow:hidden; 让超出部分隐藏，那么就达到所谓的隐藏滚动条效果，其实滚动条并没有隐藏，只是被遮挡了看不见了而已,方法很实用。