5 лучших способов управления прокруткой div в JavaScript: гайд

.scrollable-container {
height: 300px; /* Фиксированная высота */
overflow: auto; /* Включает прокрутку при необходимости */
position: relative; /* Для корректного позиционирования */
}

const container = document.querySelector('.scrollable-container');
container.addEventListener('scroll', function(event) {
console.log('Текущая позиция прокрутки:', container.scrollTop);
});

// Прокрутка к конкретной позиции
function scrollToPosition(element, top, left) {
element.scrollTop = top;
element.scrollLeft = left;
}

const container = document.querySelector('.scrollable-container');
scrollToPosition(container, 200, 0); // Прокрутка вниз на 200px

// Прокрутка в самый верх
container.scrollTop = 0;

// Прокрутка в самый низ
container.scrollTop = container.scrollHeight – container.clientHeight;

// Прокрутка в крайнее левое положение
container.scrollLeft = 0;

// Прокрутка в крайнее правое положение
container.scrollLeft = container.scrollWidth – container.clientWidth;

document.getElementById('scroll-to-top').addEventListener('click', function() {
const container = document.querySelector('.scrollable-container');
container.scrollTop = 0;
});

document.getElementById('scroll-to-bottom').addEventListener('click', function() {
const container = document.querySelector('.scrollable-container');
container.scrollTop = container.scrollHeight – container.clientHeight;
});

element.scrollIntoView(options);

// HTML структура
// <div class="messages-container">
// <div class="message" id="msg-1">Сообщение 1</div>
// <div class="message" id="msg-2">Сообщение 2</div>
// <!-- ... -->
// <div class="message" id="msg-50">Сообщение 50</div>
// </div>

// JavaScript
function scrollToMessage(messageId) {
const message = document.getElementById(messageId);
message.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}

// Вызов функции при клике на ссылку
document.querySelector('.message-link').addEventListener('click', function() {
scrollToMessage('msg-25');
});

function smoothScrollTo(element, targetPosition, duration = 300) {
const startPosition = element.scrollTop;
const distance = targetPosition – startPosition;
let startTime = null;

function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime – startTime;
const progress = Math.min(timeElapsed / duration, 1);
const easeInOutQuad = progress => 
progress < 0.5
? 2 * progress * progress
: 1 – Math.pow(-2 * progress + 2, 2) / 2;

element.scrollTop = startPosition + distance * easeInOutQuad(progress);

if (timeElapsed < duration) {
requestAnimationFrame(animation);
}
}

requestAnimationFrame(animation);
}

// Использование
const container = document.querySelector('.scrollable-container');
const targetElement = document.getElementById('target');
const containerRect = container.getBoundingClientRect();
const targetRect = targetElement.getBoundingClientRect();
const relativePosition = targetRect.top – containerRect.top + container.scrollTop;

smoothScrollTo(container, relativePosition – container.clientHeight / 2);

.scrollable-container {
height: 400px;
overflow: auto;
scroll-behavior: smooth; /* Включаем плавную прокрутку */
}

// С CSS scroll-behavior: smooth это будет плавная прокрутка
container.scrollTop = 500;

// Функция добавления нового сообщения и автоматической прокрутки
function addMessage(text, author) {
const chatContainer = document.querySelector('.chat-container');
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `<strong>${author}:</strong> ${text}`;

chatContainer.appendChild(messageElement);

// Проверяем, находится ли пользователь около конца чата
const isNearBottom = chatContainer.scrollHeight – chatContainer.scrollTop – chatContainer.clientHeight < 100;

// Прокручиваем только если пользователь был около конца
if (isNearBottom) {
chatContainer.scrollTop = chatContainer.scrollHeight;
}
}

// Инициализация наблюдателя за прокруткой для подгрузки контента
function initInfiniteScroll(container, callback) {
let loading = false;

container.addEventListener('scroll', function() {
const distanceToBottom = container.scrollHeight – container.scrollTop – container.clientHeight;

// Если до конца осталось менее 200px и не идёт загрузка
if (distanceToBottom < 200 && !loading) {
loading = true;

// Вызываем функцию загрузки нового контента
callback().then(() => {
loading = false;
}).catch(error => {
console.error('Ошибка загрузки:', error);
loading = false;
});
}
});
}

// Использование
const contentContainer = document.querySelector('.content-container');
initInfiniteScroll(contentContainer, async function() {
// Здесь код для загрузки новых элементов с сервера
const newItems = await fetchMoreItems();

// Добавляем элементы в контейнер
newItems.forEach(item => {
const element = createItemElement(item);
contentContainer.appendChild(element);
});

return true;
});

function createAutoScrollCarousel(container, interval = 3000) {
let currentPosition = 0;
const itemWidth = container.querySelector('.carousel-item').offsetWidth;
const itemsCount = container.querySelectorAll('.carousel-item').length;

// Функция прокрутки к следующему элементу
function scrollToNext() {
currentPosition = (currentPosition + 1) % itemsCount;
container.scrollLeft = currentPosition * itemWidth;
}

// Запускаем автоматическую прокрутку
const intervalId = setInterval(scrollToNext, interval);

// Останавливаем прокрутку при наведении мыши
container.addEventListener('mouseenter', () => clearInterval(intervalId));

// Возобновляем прокрутку при убирании мыши
container.addEventListener('mouseleave', () => {
clearInterval(intervalId); // Очищаем предыдущий интервал
setInterval(scrollToNext, interval);
});

return {
stop: () => clearInterval(intervalId),
start: () => setInterval(scrollToNext, interval)
};
}

// Использование
const carousel = document.querySelector('.carousel-container');
const carouselControl = createAutoScrollCarousel(carousel);

// Можно управлять карусельью: carouselControl.stop(), carouselControl.start()

function syncScroll(masterContainer, slaveContainer) {
masterContainer.addEventListener('scroll', function() {
// Вычисляем относительную позицию прокрутки (от 0 до 1)
const scrollRatio = masterContainer.scrollTop / (masterContainer.scrollHeight – masterContainer.clientHeight);

// Применяем ту же относительную позицию ко второму контейнеру
slaveContainer.scrollTop = scrollRatio * (slaveContainer.scrollHeight – slaveContainer.clientHeight);
});
}

// Использование для синхронизации прокрутки кода и предпросмотра
const codeEditor = document.querySelector('.code-editor');
const preview = document.querySelector('.preview-container');

syncScroll(codeEditor, preview);

// Варианты вызова scrollTo
element.scrollTo(x, y);
element.scrollTo({
top: y,
left: x,
behavior: 'smooth' // или 'auto'
});

// Варианты вызова scrollBy
element.scrollBy(deltaX, deltaY);
element.scrollBy({
top: deltaY,
left: deltaX,
behavior: 'smooth' // или 'auto'
});

function smoothScrollToPosition(element, top, left = 0) {
element.scrollTo({
top: top,
left: left,
behavior: 'smooth'
});
}

// Использование
const container = document.querySelector('.content-container');
smoothScrollToPosition(container, 500); // Плавная прокрутка к позиции 500px сверху

function scrollOnePageDown(element) {
// Прокручиваем на высоту видимой области минус небольшой перекрытие
const overlap = 50; // px
element.scrollBy({
top: element.clientHeight – overlap,
behavior: 'smooth'
});
}

function scrollOnePageUp(element) {
const overlap = 50; // px
element.scrollBy({
top: -(element.clientHeight – overlap),
behavior: 'smooth'
});
}

// Использование с кнопками навигации
document.getElementById('next-page').addEventListener('click', () => {
scrollOnePageDown(document.querySelector('.article-content'));
});

document.getElementById('prev-page').addEventListener('click', () => {
scrollOnePageUp(document.querySelector('.article-content'));
});

function customSmoothScroll(element, targetY, duration = 1000) {
const startingY = element.scrollTop;
const diff = targetY – startingY;

// Переменная скорость: быстрее в середине, медленнее в начале и конце
const easeInOutCubic = t => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1;

let start;

function step(timestamp) {
if (!start) start = timestamp;

const elapsed = timestamp – start;
const progress = Math.min(elapsed / duration, 1);

element.scrollTop = startingY + diff * easeInOutCubic(progress);

if (elapsed < duration) {
window.requestAnimationFrame(step);
}
}

window.requestAnimationFrame(step);
}

// Использование
const container = document.querySelector('.long-content');
const target = document.getElementById('section-3');

// Вычисляем позицию целевого элемента относительно контейнера
const containerRect = container.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const relativeY = targetRect.top – containerRect.top + container.scrollTop;

customSmoothScroll(container, relativeY, 1500);

class VirtualScroll {
constructor(container, itemHeight, totalItems, renderFunction) {
this.container = container;
this.itemHeight = itemHeight;
this.totalItems = totalItems;
this.renderFunction = renderFunction;
this.visibleItems = Math.ceil(container.clientHeight / itemHeight) + 2; // +2 для буфера

// Создаем внутренний контейнер для позиционирования
this.innerContainer = document.createElement('div');
this.innerContainer.style.height = `${totalItems * itemHeight}px`;
this.innerContainer.style.position = 'relative';
container.appendChild(this.innerContainer);

// Инициализация
this.lastScrollTop = 0;
this.currentStartIndex = 0;

// Обработчик прокрутки
this.container.addEventListener('scroll', this.handleScroll.bind(this));

// Первый рендер
this.renderItems();
}

handleScroll() {
const scrollTop = this.container.scrollTop;
const newStartIndex = Math.floor(scrollTop / this.itemHeight);

if (newStartIndex !== this.currentStartIndex) {
this.currentStartIndex = newStartIndex;
this.renderItems();
}
}

renderItems() {
// Очищаем текущие элементы
this.innerContainer.innerHTML = '';

// Рендерим только видимые элементы
const endIndex = Math.min(this.currentStartIndex + this.visibleItems, this.totalItems);

for (let i = this.currentStartIndex; i < endIndex; i++) {
const item = this.renderFunction(i);
item.style.position = 'absolute';
item.style.top = `${i * this.itemHeight}px`;
item.style.width = '100%';
item.style.height = `${this.itemHeight}px`;
this.innerContainer.appendChild(item);
}
}

scrollToIndex(index) {
this.container.scrollTo({
top: index * this.itemHeight,
behavior: 'smooth'
});
}
}

// Использование
const container = document.querySelector('.virtual-scroll-container');
const virtualScroll = new VirtualScroll(
container, 
50, // Высота каждого элемента
10000, // Общее количество элементов
(index) => {
const div = document.createElement('div');
div.textContent = `Item ${index + 1}`;
div.classList.add('list-item');
return div;
}
);

// Прокрутка к элементу с индексом 500
document.getElementById('jump-button').addEventListener('click', () => {
virtualScroll.scrollToIndex(500);
});