子divの外にマウスを置いて子divをスクロール

Question

子div内のコンテンツをスクロールするには、マウスポインタを灰色の領域に置いてください。

1

Answer 1

白い領域からスクロールは非常にスマートではありません。灰色の領域をホバリングする場合にのみ停止できます。

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

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

 
.scroll:hover { 
 
    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>