我正在尝试借助以下教程更改网页的默认滚动条：
http://manos.malihu.gr/jquery-custom-content-scroller/
问题在于，滚动条会根据我们放入特定 div 标签内的内容而发生变化，而不是整个页面的内容。例如，在这个demo中，滚动条发生了变化，但整个页面的滚动条没有变化。任何人都可以帮助我更改整个页面的滚动条而不仅仅是特定的内容块。
您使用的样式仅应用于
#content_1mCustomScrollbar文件包含后，调用 mCustomScrollbar 函数 您想要添加自定义滚动条的元素。
因此，如果您希望它应用于整个页面，您需要在 body 上调用它，而不是在该 div 上调用它：
$("body").mCustomScrollbar();
编辑：
他在开发者页面上评论说，它不适用于
body也许对某些人来说这仍然是真实的。所以解决办法如下：
$(function()
{
var win = $(window);
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container');
container.css(
{
'width': 1,
'height': 1
}
);
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
}
}
).trigger('resize');
$('body').css('overflow', 'hidden');
// IE Tweak
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
$('#full-page-container').mCustomScrollbar({
theme: "dark",
scrollbarPosition: "inside",
scrollInertia: 300,
snapAmount: 50,
scrollButtons: {
enable: true
},
contentTouchScroll: true,
scrollEasing:"easeOutCirc",
autoDraggerLength:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
});
});*{
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #f1f1f1;
}
#full-page-container
{
overflow: hidden;
}
.container{
width: 700px;
height: 1200px;
}
.main-content{
height: 1200px;
}
.content{
width: 250px;
height: 200px;
margin: 0 auto;
margin-bottom: 10px;
background-color: #0066cc;
}<!DOCTYPE html>
<html>
<head>
<title>mCustomScrollBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div id="full-page-container">
<div class="container">
<div class="main-content">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.concat.min.js"></script>