Как сделать автоматическую прокрутку окна с помощью css?

Question

Привет У меня есть проект, который похож на это изображение

красный цвет другой ДИВ Я хочу окно для автоматического прокрутки при наведении курсора над этой маленькой красной части DIV так идти вниз, пока весь DIV является показано, поэтому она должна выглядеть так

заранее спасибо

Answer 1

Что-то вроде этого:

$(document).ready(function() { 
 
    $('.scroll').on('mouseenter', function() { 
 
    $("body").animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 500); 
 
    }) 
 
})

.red { 
 
    background-color: #f00; 
 
} 
 
.green { 
 
    background-color: #0f0; 
 
} 
 
.red, 
 
.green { 
 
    margin-bottom: 10px; 
 
    height: 300px; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="red scroll"></div> 
 
<div class="green scroll"></div>

Answer 2

Вы не можете прокручивать окно, используя только CSS.

Используйте javascript и метод scrollIntoView.

Простой демо

document.querySelector('[data-scrollintoview]').addEventListener('mouseenter', function(e) { 
 
    e.target.scrollIntoView(true); 
 
});

.black { 
 
    background-color: #000; 
 
    margin-bottom: 20px; 
 
    height: 150px; 
 
} 
 
.red { 
 
    background-color: #f00; 
 
    height: 150px; 
 
}

<div class="black"></div> 
 
<div data-scrollintoview class="red"></div>