0

我最近对我的一个网站进行了一些小的编辑，其中使用了一个 javascript 滚动器（我在几年前在网上找到了它），突然它不再工作了。我想不出我会改变什么。这很奇怪，因为它在我的本地服务器（MAMP）上继续正常工作，但不再在网络上工作。

以下是无法正常工作的在线页面的链接：

http://tinyurl.com/scrollernotworking

如果在这里发布代码更有意义，这是我的 html：

<!doctype html>
<html><!-- InstanceBegin template="/Templates/scroll.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">

<!-- InstanceBeginEditable name="doctitle" --><title>TEST SCROLLER ONLINE</title><!-- InstanceEndEditable -->

<!-- InstanceParam name="id" type="text" value="staff" -->


<style type="text/css">
@import url(test.css);
</style>

<script type="text/javascript" src="../javascript/jsScroller.js"></script>
<script type="text/javascript" src="../javascript/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller"), 400, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>

</head>

<body id="staff">



            <div id="content">

                    <div id="Scroller">
                        <div class="Scroller-Container"><!-- InstanceBeginEditable name="text" -->
                        <div id="lipsum">
                            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur  posuere nisi sed tortor molestie sodales. In at turpis id nibh eleifend  porta. Sed risus dui, eleifend non sem eget, tempor adipiscing mauris.  In sodales sem vel commodo pretium. Phasellus vulputate velit a  imperdiet tristique. Nunc a lacus ut elit sagittis bibendum. Ut vel quam  nunc. Aenean hendrerit nulla eu ligula porttitor accumsan. </p>
                            <p> Duis turpis justo, commodo ac massa rhoncus, rhoncus semper massa.  Nullam faucibus leo ut tempor tempus. Mauris a elementum nibh, non  congue felis. Curabitur eu nibh mauris. Maecenas quis fringilla augue.  Morbi id malesuada nisl. Donec nec aliquam purus. Proin at malesuada  justo. Vivamus tempor velit lectus, a sagittis nisl mollis eu. Donec at  enim laoreet, rhoncus nulla posuere, consequat elit. Nam vel ante eros.  Phasellus laoreet tempus mattis. Phasellus a fringilla neque. Nulla  rutrum nibh quis malesuada sollicitudin. Etiam suscipit nibh eu  porttitor tristique. </p>
                          <p> Ut aliquam, diam sit amet dapibus imperdiet, nisl augue pharetra odio,  in interdum tortor quam non sem. Nulla molestie rhoncus sem eget  tincidunt. Sed vel velit fermentum, sagittis turpis vel, accumsan nibh.  Aliquam erat volutpat. Fusce leo est, pharetra eu tortor non,  sollicitudin tempor ligula. Proin nec adipiscing erat, at suscipit  tellus. Nullam scelerisque porta iaculis. Cras est tortor, scelerisque  non vestibulum eu, pellentesque vel magna. Vestibulum ante ipsum primis  in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
                            <h2> Heading Example 1</h2>
                            <p>ullam accumsan leo erat, in interdum quam luctus ac. In nulla mi,  sodales a aliquet at, gravida nec mauris. Quisque nec interdum diam.  Etiam fermentum pulvinar dolor in cursus. Ut hendrerit porta  ullamcorper. In lobortis neque sed sem condimentum, quis feugiat elit  consequat. In eu erat mi. </p>
                            <p> Nulla ornare egestas libero nec tempus. Sed id ornare enim. Maecenas  pharetra massa sed augue sodales vestibulum. Suspendisse potenti. Duis  et accumsan justo, a dictum velit. Aliquam ultricies eleifend sagittis.  Cras in risus est. Sed molestie urna elit, eget varius magna euismod sit  amet. </p>
                            <h2> Heading Example 2</h2>
                            <p>Sed turpis elit, hendrerit eu diam nec, vulputate laoreet lectus.  Pellentesque volutpat erat vel nisl tincidunt feugiat. Vestibulum quam  sem, condimentum eu ultrices eu, scelerisque a turpis. Duis condimentum  dictum lectus, in ornare lacus vehicula posuere. Ut venenatis urna ac  euismod bibendum. Aenean eu arcu cursus, fermentum mi at, interdum  libero. Praesent tincidunt tortor eu ultrices viverra. Fusce in velit a  mi euismod mollis. Suspendisse venenatis congue justo, at luctus enim.  Aliquam nec volutpat erat. </p>
                            <p> Fusce fringilla sapien magna, ac bibendum turpis condimentum sed. Donec  posuere, nunc et rhoncus dapibus, velit magna semper leo, sed commodo  odio enim feugiat magna. Nam aliquet turpis eu lectus ultricies, eget  tempor urna eleifend. Aliquam sit amet magna volutpat nunc pretium  accumsan quis nec erat. Fusce volutpat porta ipsum nec adipiscing. Donec  eu enim molestie ante sollicitudin consequat eget at arcu. Ut id ante  eget metus porttitor imperdiet. Fusce faucibus nunc vel elit convallis,  eu iaculis nulla semper. Vivamus ullamcorper diam libero, non dignissim  dolor vestibulum et. Vivamus in volutpat nunc. Aliquam erat volutpat.  Maecenas massa massa, congue quis tortor at, interdum laoreet augue.  Aenean mattis lacus dui, quis ullamcorper massa tincidunt quis. </p>
                          <h2> Heading Example 3</h2>
                          <p>Nullam sit amet porta urna. Pellentesque quis tristique diam. Sed ac  porta urna. Nunc porttitor eget nibh id ornare. Duis a nunc a purus  ultrices pretium eu et lacus. Duis auctor condimentum ligula, nec  commodo lectus eleifend sed. Cras varius adipiscing feugiat. Mauris  posuere sem a ultrices adipiscing. Sed id lectus tortor. Aenean vitae  rhoncus turpis, a vulputate purus. Etiam rutrum nulla sit amet urna  hendrerit bibendum. Donec laoreet porttitor risus nec porttitor. </p>
                        </div>
                          <div id="generated"></div>
                        <!-- InstanceEndEditable --></div><!--close Scroller-Container-->
                    </div><!--close Scroller-->

                    <div id="Scrollbar-Container">
                        <div class="Scrollbar-Track">
                        <div class="Scrollbar-Handle"></div><!--close Scrollbar-Handle-->
                        </div><!--close Scrollbar-Track-->
                    <!-- InstanceBeginEditable name="homepage-calltoActions" --><!-- InstanceEndEditable -->
                    </div><!--close Scrollbar-Container-->

            </div><!--close Content-->






</body>

<!-- InstanceEnd --></html>

这是我的CSS：

html, body {
        height:100%;
        width:100%;
        }

    body {
        margin:0;
        padding:50px;
        background-color:#676B62;
        line-height:135%;
        font-family:Verdana,Arial,  Helvetica, sans-serif;
        color:#333;

    }

    p {
    margin:0 0 15px 0;
    line-height:145%;
    }


    h2 {
    font-size:1.1em;
    margin:0 0 9px 0;
    text-transform:none;
    font-weight:bold;
    line-height:140%;
    }


    #content {
    float:left;
    width:700px;
    min-height:469px; /** added min to test ****/
    margin:0;
    padding:50px;
    background-color:#FFC;
    }



    /*************** Scroller CSS **************/

    #Scroller {
        text-align:left;
        font-size:12px;
        position:absolute;
        width: 590px;
        height: 375px;
        overflow: hidden;
        margin:0;
        line-height:135%;
        /*background-color:#6CF;*/
    }


    .Scroller-Container {
     position: absolute;

    }

    .Scrollbar-Track {
      width: 20px; 
      height: 375px;
      position: absolute;
      background-color:#ccd59a;
      margin:0 0 0 605px;
    }

    .Scrollbar-Handle {
      position: absolute;
      top: 0px; 
      left: 0px;
      width: 20px; 
      height: 30px;
      background-color: #81943B;
      background-image:url(images/site/scrollbar-handle.gif);
      background-repeat:no-repeat;
    }

并且 javascript 没有被我修改过，因为它原来工作得很好，但你可以在上面链接页面的头部看到它链接到。

任何人都可以提供任何帮助，我将不胜感激！

提前非常感谢......我花了几个小时试图弄清楚我可能不小心改变了什么，但无济于事:(

4

1 回答 1

1

当我打开链接时，我可以在控制台中看到此错误，Uncaught ReferenceError: jsScroller is not defined 这意味着您没有包含 js 文件或 js 文件的路径错误。纠正它肯定会起作用。

于 2013-06-12T03:20:13.347 回答