2017-02-06 35 views
0

滾動條在Mozilla

.about { 
 
    word-break: break-all; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    overflow-y: auto; 
 
    max-height: 160px; 
 
} 
 

 
.custom-scroll-style::-webkit-scrollbar-track { 
 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
background-color: #F5F5F5; 
 
} 
 
.custom-scroll-style::-webkit-scrollbar { 
 
width: 10px; 
 
background-color: #F5F5F5; 
 
} 
 
.custom-scroll-style::-webkit-scrollbar-thumb { 
 
background-color: #ff253f; 
 
border: 2px solid #fff; 
 
}
<div class="custom-scroll-style about"> 
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
</div>

我想在Mozilla和Chrome使用純CSS滾動條,但在這裏工作的是一些問題和Mozilla。這隻適用於Chrome。如何解決這個問題?

+0

你能與我們分享您的代碼? –

+0

我分享我的代碼請檢查,讓我知道如何解決它在Firefox和所有瀏覽器,而不使用JS和JQuery –

回答

2

::-webkit-scrollbar-*僞類只能在webkit中使用(因此是供應商特定的前綴)。可惜的是,Gecko瀏覽器沒有相應的功能,所以你必須回到JavaScript解決方案。

也看到這個問題(本質上是一式兩份):Custom CSS Scrollbar for Firefox