如何更改整个页面的默认滚动条，而不仅仅是在 div 中答案

【问题标题】：How to change default scrollbar of entire page and not merely within a div如何更改整个页面的默认滚动条，而不仅仅是在 div 中
【发布时间】：2013-01-20 13:07:32
【问题描述】：

我正在尝试借助以下教程更改网页的默认滚动条：
http://manos.malihu.gr/jquery-custom-content-scroller/

问题是滚动条会随着我们放在特定 div 标签内的内容发生变化，而不是整个页面。例如，在这个demo 中，滚动条发生了变化，但整个页面没有变化。谁能帮我改变整个页面的滚动条，而不仅仅是特定的内容块。

【问题讨论】：

标签： html css jquery-ui

【解决方案1】：

您使用的样式仅应用于#content_1 div（检查代码时请参阅mCustomScrollbar 类？）。根据您发布的教程：

文件包含后，调用 mCustomScrollbar 函数要添加自定义滚动条的元素。

因此，如果您希望它应用于整个页面，则需要在主体上调用它，而不是在该 div 上调用它：

$("body").mCustomScrollbar();

编辑：
从开发人员的页面上，他发现它不适用于 body，但您可以使用容器 div 而不是 body 来做同样的事情。

【讨论】：

不幸的是，这个技巧不起作用。我之前尝试过这个技巧，但没有成功脚本的官方作者也证实，它不会工作manos.malihu.gr/jquery-custom-content-scroller/comment-page-9/…我尝试了另一个技巧，它有这个问题。 stackoverflow.com/questions/14426548/…
好吧，真可惜。我想知道是否不影响儿童元素。您是否尝试过作者在您发布的评论中提到的内容？这行得通吗？
是的，但如果这样做，我将只滚动页面的前 800 像素（大约）..我正在创建一个 5000 长像素的 1 页网站，其中包含多个背景图像。所以如果我尝试作者提到的技巧，我会一直卡在页面顶部。
不确定我理解你的意思。如果您将页面内的所有内容都放在带有height: 100% 的容器div 中，为什么它会被限制为800px？因此，您只需在您的 body 中创建一个名为 scroll-container 的新 div 并将您当前拥有的所有 HTML 放入其中，然后在 scroll-container 上调用您的 JS 它应该可以工作，不是吗？
你确定吗？因为您发布到作者评论的链接显示它使用百分比：manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo

【解决方案2】：

也许对某人来说它仍然是真实的。所以解决方法如下。

$(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>

【讨论】：