自定義滾動條

我想學習視差效果。我從git hub https://github.com/james-marshall/parallax得到了這個項目。但唯一令我厭惡的是滾動條。我正在嘗試放置一些自定義滾動條。我正在關注此鏈接，以實現該目標 http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS3,but它不能解決我的問題。我只能得到這樣的東西。自定義滾動條

enter image description here

我怎樣才能改變這種惱人的滾動條（右上），如果沒有，至少我可以重新設置爲默認（.IE窗口）。我無法找到任何滾動條設置（在CSS中，我是一個新手，我可能弄錯了），我不知道Java腳本。

如何做？

下面是HTML的部分是我曾嘗試

<body data-type="single" data-speed="32"> 

    <div class="scrollbar" id="ex3"> 
      <div class="content">Example 3</div> 
    </div> 


    <div class="container"> 

    <div data-type="single" data-speed="8" id="divOne" class="div-one"> 
     <img src="img/up.png" alt=""> 
    </div> 


    <div data-type="single" data-speed="-16" id="divTwo" class="div-two"> 
     <img src="img/down.png" alt=""> 
    </div> 

    </div> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 

    <script src="js/plugins.js"></script> 
    <script src="js/script.js"></script> 


</body> 

</html>

，這是CSS部分我已經添加

.scrollbar{ 
width:150px; 
height:300px; 
background-color:lightgray; 
margin-top:40px; 
margin-left:40px; 
overflow-y:scroll; 
float:left; 
} 
.content{ 
height:450px; 
} 
#ex3::-webkit-scrollbar{ 
width:16px; 
background-color:#cccccc; 
} 
#ex3::-webkit-scrollbar-thumb{ 
background-color:#B03C3F; 
border-radius:10px; 
} 
#ex3::-webkit-scrollbar-thumb:hover{ 
background-color:#BF4649; 
border:1px solid #333333; 
} 
#ex3::-webkit-scrollbar-thumb:active{ 
background-color:#A6393D; 
border:1px solid #333333; 
} 
#ex3::-webkit-scrollbar-track{ 
border:1px gray solid; 
border-radius:10px; 
-webkit-box-shadow:0 0 6px gray inset; 
}

來源

2014-02-20 Sham

不要讓滾動條CSS如此精確到一個元素？ http://css-tricks.com/custom-scrollbars-in-webkit/ –

@Paulie_D有關如何重置默認窗口滾動條的任何想法？ – Sham

您下載的項目已經使用Nicescroll。如果要禁用它，只是註釋行129和的script.js 130：

//var nice = $('html').niceScroll(); // The document page (body) 
//$('#div1').html($('#div1').html() + ' ' + nice.version);

如果您使用的是縮小的版本，你顯然需要重建和所有。

來源

2014-02-20 13:40:18 rusmus

是的，我做到了。 – Sham

這裏是一個小的風格:)在任何地方其添加到您css文件，U可以編輯是如你所願，希望它有助於

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

來源

2014-02-20 13:03:30 ZetCoby

它所做的是自定義滾動條出現，但當頁面停止加載（加載完成）時，再次顯示舊的滾動條出現有關如何解決它的任何猜測？ – Sham

你加載任何重置CSS？如果你確保你先加載它 – ZetCoby

嘗試使用nicescroll它有一些自定義選項。與所有主流瀏覽器兼容。

來源

2014-02-20 13:04:56 Ravimallya

你能幫我把它重置到默認窗口視圖。 – Sham

請詳細說明「幫助我將它重置爲默認窗口視圖。」 – Ravimallya

我的意思是說，我想在網頁Page.Anyway中的默認滾動條視圖問題得到解決，這是因爲「nicescroll」被刪除時，它回到它的默認視圖。 – Sham

自定義滾動條

回答

相關問題