Как сделать простой плагин скролла на css transform?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Здравствуйте. Подскажите, может кто сталкивался. Нужен простейший jquery / js плагин скролла содержимого блока (не больше slick / swiper и т.д а что-то крайне простое).
Нужно чтобы блок родитель с содержимым, которое шире / выше него вел себя как обычный overflow: scroll css блок, но только на css transform для максимально плавного отклика на мобильных устройствах.
Понятно что можно написать, но проще сначала поискать нежели изобретать велосипед).

Дополнительно:

это верстается, тут js не нужен

Ответы:

Через transform вы не добьетесь никакого плавного отклика, наоборот это вызовет только массу неприятных ощущений от вашего интерфейса.
Даже самые навороченные слайдер плагины на js, работают с фризами.
И все они, используют transform.

Это решается обычным css:
overflow:scroll;

Просто задайте скролл

.block {   overflow: auto; }

.block { overflow: auto; }

Будет использован штатный скролл. Он вполне себе плавный.

это не то: scroll-behavior: smooth;?
тогда вот

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Алексей Денисов Ответ

Для создания простого плагина скролла на основе CSS transform, вам понадобится небольшой кусочек CSS и JavaScript.

Начнем с CSS. Создадим контейнер, в котором будет наш контент, и создадим скролл-бар, который будет перемещаться с помощью CSS transform:

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
 
.scroll-content {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  transition: transform 0.3s;
}
 
.scroll-bar {
  width: 10px;
  height: 50px;
  background: #333;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(0);
  transition: transform 0.3s;
}

.scroll-container { width: 300px; height: 200px; overflow: hidden; position: relative; } .scroll-content { width: 100%; height: auto; position: absolute; top: 0; left: 0; transform: translateY(0); transition: transform 0.3s; } .scroll-bar { width: 10px; height: 50px; background: #333; position: absolute; right: 0; top: 0; transform: translateY(0); transition: transform 0.3s; }

Теперь добавим JavaScript, чтобы позволить пользователю прокручивать контент с помощью скролл-бара:

const scrollBar = document.querySelector('.scroll-bar');
const scrollContent = document.querySelector('.scroll-content');
 
scrollBar.addEventListener('mousedown', function(e) {
  const startY = e.pageY;
  const startScrollY = scrollContent.offsetTop;
 
  document.addEventListener('mousemove', function(e) {
    const diffY = e.pageY - startY;
    const newScrollY = startScrollY + diffY;
 
    scrollContent.style.transform = `translateY(-${newScrollY}px)`;
    scrollBar.style.transform = `translateY(${newScrollY}px)`;
  });
 
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', null);
  });
});

const scrollBar = document.querySelector('.scroll-bar'); const scrollContent = document.querySelector('.scroll-content'); scrollBar.addEventListener('mousedown', function(e) { const startY = e.pageY; const startScrollY = scrollContent.offsetTop; document.addEventListener('mousemove', function(e) { const diffY = e.pageY - startY; const newScrollY = startScrollY + diffY; scrollContent.style.transform = `translateY(-${newScrollY}px)`; scrollBar.style.transform = `translateY(${newScrollY}px)`; }); document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', null); }); });

Теперь у вас есть простой плагин скролла, который использует CSS transform для прокрутки контента. Пользователи могут перетаскивать скролл-бар и контент будет прокручиваться соответственно. Не забудьте настроить стили и функционал по вашему усмотрению!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ