実現したいこと
発生している問題
2つのうち、前者しかスクロースしない。
html
1<div id="sampleBox"> 2 <p id="sampleText"> 3 ABCDEFG 4 </p> 5</div> 6 7 8<div id="sampleBox"> 9 <p id="sampleText"> 10 HIJKLMN 11 </p> 12</div> 13
JAVASCRIPT
1<script type="text/javascript"> 2jQuery( function() { 3 autoScroll(); 4} ); 5var $scrollY = 0; 6function autoScroll() { 7 var $sampleBox = jQuery( '#sampleBox' ); 8 $sampleBox.scrollTop( ++$scrollY ); 9 if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){ 10 setTimeout( "autoScroll()", 20 ); 11 }else{ 12 $scrollY = 0; 13 $sampleBox.scrollTop( 0 ); 14 setTimeout( "autoScroll()", 20 ); 15 } 16} 17</script>
CSS
1<style> 2#sampleBox { 3 width: 300px; 4 height: 300px; 5 overflow: hidden; 6 background-color: yellow; 7 text-align: center; 8 line-height: 1.5em; 9 font-size: 16px; 10 border: 1px solid gray; 11 border-radius: 10px; 12} 13#sampleText { 14 margin: 300px 0; 15} 16</style>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/24 03:11