自定义滚动条

我想学习视差效果。我从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

自定义滚动条

回答

相关问题