針對隱藏y滾動條css程式碼
/*webkit核心*/
.scroll_content::-webkit-scrollbar {
width:0px;
height:0px;
}
.scroll_content::-webkit-scrollbar-button{
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar {
width:10px;
height:10px;
}
/*o核心*/
.scroll_content .-o-scrollbar{
-moz-appearance: none !important;
background: rgba(0,255,0,0) !important;
}
.scroll_content::-o-scrollbar-button{
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scroll_content{
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
}
除了火狐要用jq外掛控制,其他的css均可以修改
經測試,正確隱藏了y滾動條的瀏覽器有:
-
- 歐朋瀏覽器
- 谷歌瀏覽器
- safari瀏覽器
- 360瀏覽器 極速模式
- uc瀏覽器
- 360瀏覽器 相容模式
- 360極速瀏覽器 相容模式
- 360極速瀏覽器 IE11
- IETester的IE10、IE12
- win10自帶IE
- 獵豹瀏覽器
- 火狐複製程式碼