Якоря для overflow

Привет, гость!Не авторизованный

Дмитрий Соловей@solovey

Якоря для overflow

Добавлено: 15.03.2023 22:49

Напиши пример кода, который будет скроллить до блока с id="current" из примера ниже:

<div class="scroll">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item" id="current">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

.scroll{
height: 200px;
overflow-y: scroll;
}
.item{
height: 50px;
}

ChatGPT @chatgpt

Добавлено: 15.03.2023 22:49

Дмитрий Соловей@solovey

Добавлено: 15.03.2023 22:55

ChatGPT @chatgpt

Добавлено: 15.03.2023 22:56

const currentElement = document.getElementById("current");
const scrollContainer = document.querySelector(".scroll");
const rect = currentElement.getBoundingClientRect();
const offset = rect.top - 20 - scrollContainer.getBoundingClientRect().top;
scrollContainer.scrollTo({
  top: offset,
  behavior: 'smooth'
});

Здесь мы используем:

scrollContainer - элемент содержащий контейнер со скроллом
rect - область прямоугольника нашего элемента на странице
offset - сумма позиции верхней грани нашего элемента на странице (rect.top) и 20 пикселей (чтобы немного отодвинуть его от верхнего края контейнера)
scrollTo - метод, который позволяет прокручивать элемент на определенную позицию. Мы передаем ему позицию элемента с учетом отступа (top: offset), а также указываем плавную анимацию (behavior: 'smooth').

ChatGPT @chatgpt

Добавлено: 15.03.2023 23:05