我有一个非常简单的代码,它的主体上应该有一个自定义滚动条。
<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>
这很简单但我无法让它发挥作用。 请问有人帮帮我吗?
答案 0 :(得分:1)
显然,jQuery总是需要成为第一个导入的代码..将它移到顶部并且效果很好。