jquery - 自定义滚动条不适用于 body

标签 jquery html css

我有一个非常简单的代码,它的主体上应该有一个自定义滚动条。

<html>
<head>
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<script type="text/javascript">
$(window).load(function(){
        $('body').mCustomScrollbar({
                theme:"dark-3"
        });
});
</script>
<style>
html,body{ height: 100%; }
body{ overflow: auto; }
p{
        font-family: Arial;
        width: 600px;
        margin: 1px auto;
        text-align: center;
        padding: 10px;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget porta semper. Phasellus vehicula lorem ac augue pulvinar, quis porta metus sagittis. Nunc congue, est in interdum ultricies, sapien enim semper libero, nec tempus dolor neque sed ligula. Maecenas euismod ante ac varius cursus. Aliquam faucibus rutrum commodo. Duis ultricies pharetra ex. Proin faucibus volutpat vestibulum.
</p>
</div>
</body>
</html>

它是如此简单,但我无法让它工作。 有人可以帮帮我吗?

最佳答案

显然,jQuery 总是需要成为第一个导入的代码。将它移到顶部并且效果很好。

关于jquery - 自定义滚动条不适用于 body ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29725240/

相关文章:

javascript - 无法从不同的脚本文件读取返回的 Javascript 对象

html - 如果鼠标在固定 block 上方,则滚动不起作用

javascript - 在可见的 HTML 表格行上交替背景颜色的最快方法

php - 灯箱根据我按下的内容显示内容

javascript - API AJAX 获取请求

javascript - appendChild 返回无法读取未定义的属性 'containerDiv'

android - 更改 android 手机方向会导致 div 消失

html - SSL 证书将网站重定向到不安全

javascript - 当外部div的css改变时改变内部div的css

javascript - 比较 jQuery 中的按键和字符的简单方法?