我正在尝试使用以下教程更改网页的默认滚动条:
http://manos.malihu.gr/jquery-custom-content-scroller/
问题是滚动条会更改我们放入特定div标签而不是整个页面的内容。例如,在此demo中,滚动条已更改,但不会更改为enitire页面。任何人都可以帮我改变整个页面的滚动条,而不仅仅是一个特定的内容块。
答案 0 :(得分:6)
您正在使用的样式仅应用于#content_1
div(检查代码时请参阅mCustomScrollbar
类?)。根据您发布的教程:
包含文件后,您可以在上面调用mCustomScrollbar函数 要添加自定义滚动条的元素。
因此,如果您希望将其应用于整个页面,则需要在主体上调用它,而不是在该div上调用它:
$("body").mCustomScrollbar();
<强> 编辑: 强>
在开发人员的页面中,他评论说它不会专门在body
上工作,但你可以用容器div而不是正文来做同样的事情。
答案 1 :(得分:1)
也许对于那些仍然存在的人。所以解决方案如下。
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;