Question

我正在尝试使用自定义垂直滚动条，这与我的网页设计相得益彰。我在网上找到了这个教程：http://www.jqueryrain.com/?L_dwB4rN它只是没有为我工作，我不知道为什么...我下载了它指定的所有文件，把它们放在正确的文件夹等等，但它不起作用。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>website</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <!--<script src="jquery.scrollbars.js"></script>-->
        <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
        <script>
            (function($){
                $(window).load(function(){
                    $("#aboutinfo").mCustomScrollbar({
                        verticalScroll:true,
                        theme:"light"
                });
            })(jQuery);
        </script>
    </head>

    <body>
     <div id="container">   
        <div id="nav">
            <p id="np">NAME PLACEHOLDER</p>
            <p id="about"><a href="about.html">ABOUT</a></p>
            <p id="srv"><a href="services.html">SERVICES</a></p>
            <p id="pjt"><a href="projects.html">PROJECTS</a></p>
            <p id="cont"><a href="contact.html">CONTACT</a></p>
        </div>

        <div id="aboutinfo">
            <p>
                A variation of the common lorem ipsum text has been used since the 1960s or earlier[1] to provide a filler text during typesetting.
The text is derived from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil).[2] The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit (translation: "Neither is there anyone who loves, pursues or desires pain itself because it is pain"). It is not known exactly when the text acquired its current standard form; it may have been as late as the 1960s. Richard McClintock, a Latin scholar who was the publications director at Hampden-Sydney College in Virginia, discovered the source of the passage sometime before 1982 while searching for instances of the Latin word "consectetur", rarely used in classical literature.[1][3] The physical source of the Lorem Ipsum text may be the 1914 Loeb Classical Library Edition of the De Finibus, where the Latin text finishes page 34 with "Neque porro quisquam est qui do-" and begins page 36 with "lorem ipsum (et seq.)…", suggesting that the galley type of that page was scrambled to make the dummy text seen today. This suggests that "lorem ipsum" may have been used as dummy text before the Letraset transfer sheets popularized it.

            </p>        
        </div>


      </div>


      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="jquery.mCustomScrollbar.concat.min.js"></script>
    </body>
</html>

CSS：

/*NAVIGATION*/
a{
  color:black;
  text-decoration:none;
}

a:hover,a:active
{
 color:#C8C8C8;
}

#np{
    position:relative;
    right:100px;
    font-size:20px;
}


/*PAGE SET UP */

body{
    background-color:#F8F8F8;
}

#container{
    position:absolute;
    width:200px;
    height:200px;
    z-index:15;
    top:50%;
    left:50%;
    margin:-100px 0 0 -150px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size:15px;


}


/*CONTACT STYLE*/
#cntinfo{
    position:absolute;
    left:200px;
    top:40px;
    width:400px;
}


/*ABOUT STYLE*/
#aboutinfo{
    position:absolute;
    left:200px;
    top:40px;
    width:400px;
    height:200px;
    overflow:auto;

}

实现自定义垂直滚动条

0 个答案: