オーバーフローが発生したときにテキストを自動的にスクロールする方法はありますか？

Question

私は単純にdivをヘッダの高さに塗りつぶしていますが、テスト目的のためにはheightが400pxと固定されています。

それは次のようになります。それはテキスト自体を書き込みますので、私はtype-itライブラリを使用

。現在のところ、overflowプロパティはhiddenに設定されており、下の境界線の後ろにテキストが表示されません。

私が達成したいのは、上の境界線の後ろに隠れるようにテキストを上に移動することです。下の境界線の後ろに隠すようにします（自動的にスクロールします）。

これは組み込みのCSSのものでも可能ですか、カスタムJSツールを記述する必要がありますか？あらゆるヒントありがとう！ここで

は、現在のdivのコードです：

.header-code { 

    position: absolute; 
    width:300px; 
    height:400px; /* 100% */ 
    float: left; 

    padding: 50px 50px 50px 50px; 
    color: yellow; 
    border: 1px dotted blue; 

    overflow: hidden; 
    text-align: left; 
} 

Answer 1

私はタイプ-それに慣れていないんだけど、これはあなたを始めるために何かを与えることができます。

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    background-color: lightgray; 
 
} 
 

 
.scroll { 
 
    animation: scroll-it 10s linear forwards; 
 
    display: inline-block; 
 
    margin-top: 0; 
 
} 
 

 
@keyframes scroll-it { 
 
    from { margin-top: 0px; } 
 
    to { margin-top: -600px; } 
 
}

<div><span class="scroll"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas 
 
    odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam 
 
    euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio, 
 
    ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat 
 
    ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada 
 
    fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec 
 
    consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra. 
 
    Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula. 
 
</span></div>

Answer 2

マーキータグのために良いユースケースのだろう！ scrollamount属性を使用して、移動速度を制御することもできます。

あなたがここにHTML4のこの素晴らしい機能についての詳細を読むことができます：あなたは `オーバーフローを使用していないのはなぜhttps://www.quackit.com/html/codes/html_marquee_code.cfm

 
 
.container { 
 
    background-color: black; 
 
    width:300px; 
 
    height:400px; /* 100% */ 
 
    overflow: hidden; 
 
    
 
    border: 1px dotted blue; 
 
} 
 
.header { 
 
    width: 94%; 
 
    height: 94%; 
 
    padding: 3%; 
 
    color: yellow; 
 
    overflow: hidden; 
 
    text-align: left; 
 
}

<div class="container"> 
 
<marquee class="header" behaviour="scroll" direction="up"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas 
 
    odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam 
 
    euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio, 
 
    ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat 
 
    ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada 
 
    fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec 
 
    consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra. 
 
    Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula. 
 
</marquee> 
 
</div>