Question

我使用以下代码进行纳米滚动。但是纳米卷轴没有显示出来。我已经添加了css和js文件。我错了吗？

我正在使用来自thei oficial网站的nanoscoller生产代码来获取.js文件。

<head>

    <!-- CSS
   ================================================== -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/nano.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="timeline/css/timecube.jquery.css">
       <script src="js/nano.js"></script>


    <style>
             .nano { height: 280px;}
             .nano .content { }
             .nano .pane   { background: none}
             .nano .slider { background: #FED136; }
        </style>
        <script>
                $(document).ready(function(){
                     $(".nano").nanoScroller();
                });
        </script>

</head>
<body data-spy="scroll" data-target="#nav-wrap">
         <div class="col half nano">
            <h3>Latest Updates</h3>
            <div class="content">
            <div class="badge">4&5<span>APR '14</span></div>
            <span class="client-author">Education Fair - World Trade Center</span><br><br>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
            there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
            Semantics, a large language ocean. <a href="events.html">Details & Photos</a>
            </p>
            <div class="badge">4&5<span>APR '14</span></div>
            <span class="client-author">Education Fair - World Trade Center</span><br><br>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
            there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
            Semantics, a large language ocean. <a href="events.html">Details & Photos</a>
            </p>
         </div>
         </div>
</body>

Answer 1

这是您的代码jsfiddle。

在CHROME，FIREFOX中测试

我在jsfiddle中更新了代码，还包括你的css：

   .nano { height: 280px;}
   .nano .content { }
   .nano .pane   { background: none}
   .nano .slider { background: #FED136; }

Nanoscroller不适用于任何浏览器

1 个答案: