jQuery自定义内容滚动条不起作用
jQuery custom content scroller not working
http://manos.malihu.gr/jquery-custom-content-scroller/
我正在尝试使用 jquery 自定义滚动条库，但它没有显示自定义滚动条。 我不知道我做错了什么我没有收到任何错误，我认为我正确路径文件并按正确的顺序加载所有内容。我真的可以使用一些帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Huppit</title>
<!--bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!--custom scrollbar-->
<link href="scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
</head>
<body style="height:2000px">
<!--bootstrap and jquery-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--custom scrollbar-->
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<!--own scripts-->
<script type="text/javascript">
$("body").mCustomScrollbar();
</script>
</body>
</html>
我设法让它工作。查看 CODEPEN 中的一个工作示例。
为了让它工作，我必须做两件事。首先，我必须将带有滚动条的元素（在本例中body_content）放在containerdiv 中。其次，我不得不在div 和 body 上将overflow更改为hidden container以摆脱垂直滚动条的重复。
.JS
$(window).load(function(){
$(".body_content").mCustomScrollbar({
theme: "dark",
scrollButtons: {enable:true}
});
});
.CSS
body, .container {
overflow: hidden;
}
.body_content {
position: relative;
max-height: 500px;
background: #ddd;
}
顺便说一句，根据插件文档，您始终需要为水平滚动条设置width或max-width，为垂直滚动条设置height或max-height。此外，您可以使用插件中定义的变量来执行此操作。
试试这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Huppit</title>
<!--bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
html,body{height:100%;}
</style>
<!--custom scrollbar-->
<link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--custom scrollbar-->
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.js"></script>
</head>
<body>
<!--Add a lot of text here-->
<script type="text/javascript">
(function($){
$(window).load(function(){
$("body").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</body>
</html>
按照此示例 http://manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo.html
您可以在您的网站上尝试以下代码：
<html>
<head>
<title>Custom Scroller</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
$(".body-wrapper").mCustomScrollbar({
theme: "inset-dark",
scrollButtons: {enable:true}
});
});
</script>
<style type="text/css">
body, html { height:100%; min-height:100%; }
body { margin:0; }
.body-wrapper { height:100%; background-color:#eee; overflow:hidden;}
</style>
</head>
<body>
<div class="body-wrapper">
<h1>Custom Scroller</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>确保您的脚本文件位于正确的文件夹中。我将它们更改为 CDN 链接，并将所有脚本放在<head></head>标签之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Huppit</title>
<!--bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!--custom scrollbar-->
<link href="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--custom scrollbar-->
<script src="https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.1.3/jquery.mCustomScrollbar.min.js"></script>
</head>
<body style="height:2000px">
<script type="text/javascript">
$("body").mCustomScrollbar();
</script>
</body>
</html>
相关文章：
- 幻灯片滚动javascript不起作用
- 无限滚动jquery不起作用
- 在我的情况下，获取滚动 y 位置不起作用
- 弹出窗口中的溢出滚动条不起作用(引导）
- 引导滚动间谍不起作用，导航菜单按钮导致标题重新加载
- 为什么这个滚动动画不起作用
- jQuery自定义内容滚动条不起作用
- 高图表滚动条不起作用
- 自动滚动脚本不起作用
- j查询进度条不起作用
- angular:绑定到滚动事件不起作用
- Titanium SDK:JavaScript->滚动功能不起作用
- 使用 JavaScript 恢复滚动事件不起作用
- ng可滚动根本不起作用
- jQuery - 文本和图像滚动效果不起作用
- jQuery滚动功能不起作用
- 滚动图像不起作用
- 技能条不起作用
- jQuery . addclass()对滚动事件不起作用
- 滚动事件不起作用，除非页面被重新加载
