jquery - serialSroll - 如何滚动内部 div？

Question

这是我放置的测试页面：http: //02ce746.netsolhost.com/tst/a.htm

我正在尝试在页面加载时自动滚动 DIV。我在 script.js 中尝试了很多不同的组合，以至于我即将放弃。任何人都可以帮忙吗？

Answer 1

尝试将您的脚本包含在 $(document).ready(){}

$(document).ready( function(){
 $('div.scrollcontainer').serialScroll({interval:'1',axis:'y'});
});

Answer 2

您只需要设置 force = true，这将强制执行初始滚动事件：

$(document).ready( function(){
    $('div.scrollcontainer').serialScroll({force:true});
});

Answer 3

从插件站点：

这个插件允许您通过顺序滚动来轻松地为任何一系列元素设置动画。

我认为该插件会滚动浏览一组元素，而您的容器中只有 on 元素。也许您应该将段落中的文本分开...

Answer 4

请看看这个，它的工作原理：

<style type="text/css">
._container{clear:left;height:120px;margin:10px 0 0 10px;  overflow:hidden;
        position:relative;width:220px;}
ul{height:1011px;width:1820px;background-color:#5B739C;list-style-image:none;
        list-style-position:outside;list-style-type:none;margin:0;padding:0;}
li{background-color:#DDDDDD;border:1px solid black;font-weight:bolder;
       height:100px;padding:50px;position:relative;text-align:center;width:200px;
        list-style-image:none;list-style-position:outside;
        list-style-type:none;margin:0;}
</style>

<div id="container" class="_container">
  <ul>
     <li><p>0</p></li> <li><p>1</p></li> <li><p>2</p></li> <li><p>3</p></li> 
     <li><p>4</p></li> <li><p>5</p></li> <li><p>6</p></li> <li><p>7</p></li> 
     <li><p>7</p></li> <li><p>8</p></li> <li><p>9</p></li> <li><p>10</p></li>
     <li><p>11</p></li> <li><p>12</p></li> <li><p>13</p></li> <li><p>14</p></li>
 </ul>
</div>

 <script type="text/javascript">
 $(document).ready(function(){
   $("div#container").serialScroll({items:'li',  duration:2000,  
                        force:true,  axis:'y',  easing:'linear',
         lazy:true, interval:1,  step:1 }); 
 });
 </script>