我有一个非常简单的代码,它的主体上应该有一个自定义滚动条。
<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/