如何通过CSS(级联样式表)为一个div
页面而不是整个页面自定义滚动条?
如何通过CSS(级联样式表)为一个div
页面而不是整个页面自定义滚动条?
Answers:
我认为整合有关滚动条,CSS和浏览器兼容性的最新信息会有所帮助。
当前,没有跨浏览器的滚动条CSS样式定义。最后,我在W3C文章中提到了以下内容,并于最近进行了更新(2014年10月10日):
某些浏览器(IE,Konqueror)支持非标准属性“ scrollbar-shadow-color”,“ scrollbar-track-color”等。这些属性是非法的:它们既未在任何CSS规范中定义,也未标记为专有(通过在它们前面加上“ -vendor-”)
正如其他人提到的那样,Microsoft支持滚动条样式,但仅适用于IE8及更高版本。
例:
<!-- language: lang-css -->
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
同样,WebKit现在具有自己的版本:
从WebKit的“自定义”滚动条中,相关CSS:
/* pseudo elements */
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
从64版开始,Firefox通过属性scrollbar-color
(部分为W3C draft)和scrollbar-width
(W3C draft)支持滚动条样式。在此答案中可以找到有关实现的一些很好的信息。
JavaScript库和插件可以提供跨浏览器的解决方案。有很多选择。
这份名单可以继续使用。最好的选择是搜索,研究和测试可用的解决方案。我相信您将能够找到满足您需求的东西。
万一您想防止没有以“ -vendor”为前缀的滚动条样式,W3C上的这篇文章将提供一些基本说明。基本上,您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
注意:此答案包含来自各种来源的信息。如果使用了源,则此答案中也将其链接。
试试这个
资料来源:https : //nicescroll.areaaperta.com/
简单实施
<script type="text/javascript">
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
这是一个jQuery插件滚动条,因此您的滚动条是可控制的,并且在各种OS上看起来都是相同的。
像许多人一样,我一直在寻找这样的东西:
...但是a-什么都没有!
好吧,如果一项工作值得做……我能够在大约30分钟的时间内启动并运行某件东西。免责声明:它有很多已知的(也许还有一些尚不为人所知)的问题,但是这让我想知道地球上其他2920系列JS在许多产品中有什么用!
var dragParams;
window.addEventListener('load', init_myscroll);
/* TODO: Much to do for v axis! */
function bardrag_mousemove(e) {
var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
dragParams.slider.style.left = pos + 'px';
updateScrollPosition(dragParams.slider, pos);
}
function updateScrollPosition(slider, offsetVal) {
var bar = slider.parentNode;
var myscroll = bar.parentNode;
var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
var maxSlide = bar.offsetWidth - slider.offsetWidth;
var viewX = maxView * offsetVal / maxSlide;
myscroll.scrollLeft = viewX;
bar.style.left = viewX + 'px';
}
function drag_start(e) {
var slider = e.target;
var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
dragParams = {
clientX: e.clientX,
offsetLeft: slider.offsetLeft,
slider: e.target,
maxLeft: maxLeft
};
e.preventDefault();
document.addEventListener('mousemove', bardrag_mousemove);
}
function drag_end(e) {
e.stopPropagation();
document.removeEventListener('mousemove', bardrag_mousemove);
}
function bar_clicked(e) {
var bar = e.target;
var slider = bar.getElementsByClassName('slider')[0];
if (bar.className == 'h bar') {
var maxSlide = bar.offsetWidth - slider.offsetWidth;
var sliderX = e.offsetX - (slider.offsetWidth / 2);
sliderX = Math.max(0, Math.min(sliderX, maxSlide));
slider.style.left = sliderX + 'px';
updateScrollPosition(slider, sliderX);
}
}
function init_myscroll() {
var myscrolls = document.getElementsByClassName('container');
for (var i = 0; i < myscrolls.length; i++) {
var myscroll = myscrolls[i];
var style = window.getComputedStyle(myscroll);
if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
addScroller(false, myscroll);
}
if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
addScroller(true, myscroll);
}
}
}
function addScroller(isX, myscroll) {
myscroll.className += ' myscroll';
var bar = document.createElement('div');
var slider = document.createElement('div');
var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
slider.style.width = 100 * sliderPx / offsetDim + '%';
slider.className = 'slider';
bar.className = isX ? 'h bar' : 'v bar';
bar.appendChild(slider);
myscroll.appendChild(bar);
bar.addEventListener('click', bar_clicked);
slider.addEventListener('mousedown', drag_start);
slider.addEventListener('mouseup', drag_end);
bar.addEventListener('mouseup', drag_end);
document.addEventListener('mouseup', drag_end);
}
body {
background-color: #66f;
}
.container {
background-color: #fff;
width: 50%;
margin: auto;
overflow: auto;
}
.container > div:first-of-type {
width: 300%;
height: 100px;
background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */
.myscroll {
overflow: hidden;
position: relative;
}
.myscroll .bar {
background-color: lightgrey;
position: absolute;
}
.myscroll {
padding-bottom: 20px;
}
.myscroll .h {
height: 20px;
width: 100%;
bottom: 0;
left: 0;
}
.myscroll .slider {
background-color: grey;
position: absolute;
}
.myscroll .h .slider {
height: 100%;
}
<div class="container">
<div></div>
</div>
我尝试了很多插件,其中大多数不支持所有浏览器,我更喜欢iScroll和nanoScroller适用于所有这些浏览器:
但是 iScroll不能通过触摸操作!
演示iScroll:http : //lab.cubiq.org/iscroll/examples/simple/
演示nanoScroller:http : //jamesflorentino.github.io/nanoScrollerJS/
请检查此链接。工作演示示例
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
-webkit-
方法的局限性。
Firefox新版本(64)支持CSS滚动条模块级别1
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
资料来源:https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
这是一个适用于Chrome和Safari的webkit示例:
CSS:
::-webkit-scrollbar
{
width: 40px;
background-color:#4F4F4F;
}
::-webkit-scrollbar-button:vertical:increment
{
height:40px;
background-image: url(/Images/Scrollbar/decrement.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
::-webkit-scrollbar-button:vertical:decrement
{
height:40px;
background-image: url(/Images/Scrollbar/increment.png);
background-size:39px 30px;
background-repeat:no-repeat;
}
输出:
.className::-webkit-scrollbar {
width: 10px;
background-color: rgba(0,0,0,0);
}
.className::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
}
给了我一个不错的手机/ OSX。
您可以通过一种方法将自定义滚动条应用于HTML文档中的自定义div元素。这是一个有帮助的例子。https://codepen.io/adeelibr/pen/dKqZNb但是要点。你可以做这样的事情。
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
CSS文件如下所示。
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
这就是Google长期以来在其某些应用程序中使用的功能。在代码中看到,如果您应用下一个类,则它们会以某种方式在Chrome中隐藏滚动条,但仍然可以使用。
这些类jfk-scrollbar
,jfk-scrollbar-borderless
以及jfk-scrollbar-dark
.testg{ border:1px solid black; max-height:150px; overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}
/* The google css code for scrollbars */
::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px
}
::-webkit-scrollbar-button {
height: 0;
width: 0
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
border-width: 7px 0 0;
padding: 0 0 0 100px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .3);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .6);
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
background-color: rgba(255, 255, 255, .75);
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .035);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .07);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
background: transparent
}
body::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 0 0 0 3px;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
border-width: 3px 0 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
height: 0;
width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, .05);
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
background-color: rgba(255, 255, 255, .1);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 7px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 7px 0 0;
padding: 0 0 0 100px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .3);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .6);
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(255, 255, 255, .75);
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .035);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, .07);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 0 0 0 3px;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
border-width: 3px 0 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
<div class="content">
Look Ma' my scrollbars doesn't have arrows <br /><br />
content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/>
</div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
<div class="content">
Look Ma' my scrollbars dissapear in chrome<br /><br />
content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/>
</div>
</div>
http://jsfiddle.net/76kcuem0/32/
我只是发现从滚动条中删除箭头很有用。自2015年起,它在其材料设计用户界面中搜索结果列表中的位置时已在Google地图中使用。
我尝试了很多JS和CSS滚动,发现它非常易于使用,并在IE,Safari和FF上进行了测试,并且工作正常
AS @thebluefox建议
下面是它的工作原理
将以下脚本添加到
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>
而这在您需要滚动的段落中
<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>
有关更多详细信息,请访问插件页面
希望能帮助到你
Webkit浏览器(例如Chrome,Safari和Opera)支持非标准::: webkit-scrollbar伪元素,这使我们能够修改浏览器滚动条的外观。
注:该:: - WebKit的滚动条没有被Firefox或IE和边缘的支持。
* {
box-sizing: border-box;
font-family: sans-serif;
}
div {
width: 15rem;
height: 8rem;
padding: .5rem;
border: 1px solid #aaa;
margin-bottom: 1rem;
overflow: auto;
}
.box::-webkit-scrollbar {
width: .8em;
}
.box::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
.box::-webkit-scrollbar-thumb {
background-color: dodgerblue;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
参考: 如何创建自定义滚动条
在Firefox +64中仅使用CSS工作
.mycoldiv{
scrollbar-color: white rebeccapurple;
scrollbar-width: thin;
display: block;
height:400px;
overflow-x: auto;
}
更多信息:https : //developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars
假设div为
<div class="custom_scroll"> ... </div>
将CSS样式应用为
//custom scroll style definitions
.custom_scroll
{
overflow-y: scroll;
}
//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar
{
width: 5px;
opacity: 0.5;
//background-color: #F5F5F5;
}
.custom_scroll::-webkit-scrollbar-thumb
{
border-radius: 10px;
opacity: 0.5;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//background-color: #555;
}
结果滚动条将显示为
或使用类似这样的东西:
var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};
并初始化:
<body onload="new MiniScroll(this);"></body>
并自定义:
.scroll-place { // ... // }
.scroll { // ... // }
overflow:auto;
仅适用于此<div>
。还有更多背景细节吗?