我想通过将鼠标指针保持在灰色区域来滚动子div中的内容。
答案 0 :(得分:0)
从白色区域滚动不是很聪明。你只能在悬停灰色区域时停止它。
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>
&#13;