これは私が作成したテスト ページです: http://02ce746.netsolhost.com/tst/a.htm
ページの読み込み時に DIV を自動スクロールしようとしています。script.js で非常に多くの異なる組み合わせを試したので、あきらめようとしています。誰でも助けることができますか?
これは私が作成したテスト ページです: http://02ce746.netsolhost.com/tst/a.htm
ページの読み込み時に DIV を自動スクロールしようとしています。script.js で非常に多くの異なる組み合わせを試したので、あきらめようとしています。誰でも助けることができますか?
force = trueを設定するだけで、最初のスクロールイベントが強制されます。
$(document).ready( function(){
$('div.scrollcontainer').serialScroll({force:true});
});
これを見てください、それは動作します:
<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>
スクリプトを $(document).ready(){} で囲んでみてください
$(document).ready( function(){
$('div.scrollcontainer').serialScroll({interval:'1',axis:'y'});
});
プラグインサイトから:
このプラグインを使用すると、連続してスクロールすることで、一連の要素を簡単にアニメーション化できます。
プラグインは一連の要素をスクロールすると思いますが、コンテナには要素しかありません。テキストを段落で区切る必要があるかもしれません...