Question

Find the JSFiddle here.

我正在尝试使用malihu JQuery Custom Scrollbar插件，我已按照以下要求和步骤（至少我认为如此），但它似乎对我不起作用。我如何让它工作？

将jquery.mCustomScrollbar.concat.min.js，jquery.mCustomScrollbar.css和mCSB_buttons.png解压缩并上传到您的网络服务器

我做到了，只是交叉检查。

在HTML文档的head标记中包含jquery.mCustomScrollbar.css ...在head标记中包含jQuery库...和jquery.mCustomScrollbar.concat.min.js ...

我做到了。

要添加滚动条的元素应具有典型值溢出块的CSS属性是高度（或 max-height）值，auto（或隐藏）和内容的溢出值足够长，需要滚动。

我应用滚动条的元素是.content-text，它出现两次。它有height: 100%; overflow: auto;，以及正常滚动条确实出现的一堆文字。

包含文件后，在元素上调用mCustomScrollbar函数选择器要添加滚动条。

我首先添加script并更改script.js 中的选择器，这给了我一堆JSLint错误。所以我尝试将脚本添加到body标记之前的文档末尾，如代码中所示。但没有收获！

将类mCustomScrollbar添加到要添加自定义的任何元素带有默认选项的滚动条。

我已将mCustomScrollbar添加到.content-text元素，您可以在代码中看到。

CODE：

＆＃13;

(function($){
    $(window).load(function(){

        $("content-text").mCustomScrollbar({
            theme:"minimal"
        });

    });
})(jQuery);

/*
Produces the following JSLint errors:

11	Expected exactly one space between 'function' and '('.	(function($){
11	Expected exactly one space between ')' and '{'.	(function($){
11	Missing space between ')' and '{'.	(function($){
12	Missing 'use strict' statement.	$(window).load(function(){
12	Expected exactly one space between 'function' and '('.	$(window).load(function(){
12	Expected exactly one space between ')' and '{'.	$(window).load(function(){
12	Missing space between ')' and '{'.	$(window).load(function(){
15	Missing space between ':' and 'minimal'.	theme:"minimal"
19	Move the invocation into the parens that contain the function.	})(jQuery);
19	'jQuery' was used before it was defined.	})(jQuery);
*/

＆＃13;

.wrapper {
    height:100%;
    width: 95%;
    margin: 10px auto;
    display: table;
    background-color:teal;
}

.cell {
    display:table-cell;
    vertical-align: top;
}

.left-cell {
    width:50%
}

.middle-cell {
    height:100%;
    background-color: white;
    width:1.5px;
    font-size: 0;
    box-shadow: 0px 50px 10px black;
    -moz-box-shadow: 0px 50px 10px black;
    -webkit-box-shadow: 0px 50px 10px black;
}

.right-cell {
   /* width:50%*/ /*Commenting b/c both right and left 50, 50 squish and vanish the middle between them*/
    background-color: blueviolet
}



.step-container {
    max-height: 200px;
    font-size: 0;
}

.right-cell .step-container {
    margin-top:100px;
}



.content-box {
    display: inline-block;
    width: 170px;
    height: 200px;
    /*border: 5px solid blue;*/
    font-size: 0;
}

.content-box .content-image {
    width:35%;
    height:100%;
    background-size: cover;
    display: inline-block
}

.content-box .content-text {
    background-color: rgb(255, 255, 255);  
    color: #1c1a1a;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 100;
    overflow:auto;
    display: inline-block;
    width:65%;
    height:100%;
}

.notch-outer-container {
    display:inline-block;
}

.left-cell .notch-outer-container {
    margin-right: 3px;
}

.right-cell .notch-outer-container {
    margin-left: 3px;
}

.notch-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.notch {
    width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

.right-face-notch {
	border-left: 15px solid brown;
}

.left-face-notch {
    border-right: 15px solid brown;
}

.number-outer-container {
    display:inline-block;
    position:absolute;
}

.left-cell .number-outer-container {
    left:47.5%;
}

.right-cell .number-outer-container {
    right:48%;
}

.number-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.number-banner {
    width:30px;
    height:30px;
    background-color:crimson;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px;
}

.right-cell .number-outer-container {
    /*display: none;*/
}

＆＃13;

<link href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- NOTE: THE INSTRUCTIONS AT http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info DO INSTRUCT TO ALSO LOAD THE IMAGE AT "//malihu.github.io/custom-scrollbar/mCSB_buttons.png" BUT THIS SO TOOL DOES NOT LET ME LINK TO AN EXTERNAL IMAGE. 

i HAVE ADDED THAT IN THE JSFiddle I HAVE LINKED IN THE QUESTION. SO CHECK THAT-->


<!DOCTYPE>

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
    <script src="javascript/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
    
<body>
    <div class="wrapper" >
        
        
        
        <div class="left-cell cell" align="left">
            <div class="step-container">
                <div class="content-box">
                        <div class="content-image" style="background-image: url(http://simeonhookphotography.com/wp-content/gallery/favorites/norway-countryside-to-bergen.jpg);"></div>
                        <div class="content-text mCustomScrollbar"
                             ><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                    </div>

                
                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>
                

                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        
        <div class="middle-cell cell"></div>
        
        
        
        
        <div class="right-cell cell" align="right" >
            <div class="step-container">
                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>

                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="left-face-notch notch"></div>
                    </div>
                </div>

                <div class="content-box">
                    <div class="content-text mCustomScrollbar"><h6>What is Lorem Ipsum</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
                    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)">
                    </div>
                </div>
                
            </div>
         </div>
    
    
    </div>
    
    <script>
		(function($){
			$(window).load(function(){
				
				$("content-text").mCustomScrollbar({
					theme:"minimal"
				});
				
			});
		})(jQuery);
	</script>
</body>

</html>

＆＃13;

编辑：

我在关闭<body>标记之前在文档的末尾添加了以下内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="javascript/jquery-2.1.3.js"><\/script>')</script>

    <!-- custom scrollbar plugin -->
    <script src="../jquery.mCustomScrollbar.concat.min.js"></script>

    <script>
        (function($){
            $(window).load(function(){

                $("content-text").mCustomScrollbar({
                    theme:"minimal"
                });

            });
        })(jQuery);
    </script>

但Chrome仍然存在以下错误：

enter image description here

并且滚动条不会出现在Firefox中。

Answer 1

我不认为你正在加载jquery。 github存储库中有很多例子，你可以从那里开始。

看看这个：https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/callbacks_example.html#L89

    <!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>

Answer 2

为高度设置一个特定的值，即将 100% 改为 600px；

 .content-box .content-text {
        background-color: rgb(255, 255, 255);  
        color: #1c1a1a;
        font-family: sans-serif;
        font-size: 15px;
        font-weight: 100;
        overflow:auto;
        display: inline-block;
        width:65%;
        height:100%; //assign a particular value to the height, say 600px;
}

当我按照教程中的所有说明操作时，为什么这个JQuery-Custom-Content-Scroller不适合我？

2 个答案: