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

时间:2013-01-20 13:07:32

标签: html css jquery-ui

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

问题是滚动条会更改我们放入特定div标签而不是整个页面的内容。例如,在此demo中,滚动条已更改,但不会更改为enitire页面。任何人都可以帮我改变整个页面的滚动条,而不仅仅是一个特定的内容块。

2 个答案:

答案 0 :(得分:6)

您正在使用的样式仅应用于#content_1 div(检查代码时请参阅mCustomScrollbar类?)。根据您发布的教程:

  

包含文件后,您可以在上面调用mCustomScrollbar函数   要添加自定义滚动条的元素。

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

$("body").mCustomScrollbar();

<强> 编辑:
在开发人员的页面中,他评论说它不会专门在body上工作,但你可以用容器div而不是正文来做同样的事情。

答案 1 :(得分:1)

也许对于那些仍然存在的人。所以解决方案如下。

&#13;
&#13;
GeneratePDF()
&#13;
$(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   
            }
        });
});
&#13;
*{
  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;
}
&#13;
&#13;
&#13;