Как создать плагин скролла с использованием CSS transform?

Question

Алекс

javascript , css

Как создать плагин скролла с использованием CSS transform?

Здравствуйте. Может кто-то сталкивался с простым jquery/js плагином для прокрутки содержимого блока? Я ищу что-то очень простое, не вроде slick/swiper. Мне нужно, чтобы родительский блок со внутренним содержимым, превышающим его размеры, можно было прокручивать с помощью css transform для плавности на мобильных устройствах. Я могу написать это самостоятельно, но сначала хочу поискать уже существующие решения, чтобы не изобретать велосипед. Спасибо.

13 февраля 2024 г. 23:38

Ответы на вопрос 2

Похожие вопросы

Answer 1

Если вам нужен простой плагин для прокрутки содержимого блока с использованием CSS transform, вы можете воспользоваться следующим кодом:

HTML:
```html
<div class="scroll-container">
  <div class="scroll-content">
    <!-- Ваше содержимое -->
  </div>
</div>
```

CSS:
```css
.scroll-container {
  position: relative;
  overflow: hidden;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease-out;
}
```

JavaScript:
```javascript
(function() {
  var container = document.querySelector('.scroll-container');
  var content = document.querySelector('.scroll-content');
  
  var isDragging = false;
  var startX, startY, scrollLeft, scrollTop;
  
  container.addEventListener('mousedown', function(e) {
    isDragging = true;
    startX = e.pageX - container.offsetLeft;
    startY = e.pageY - container.offsetTop;
    scrollLeft = container.scrollLeft;
    scrollTop = container.scrollTop;
  });
  
  container.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    var x = e.pageX - container.offsetLeft;
    var y = e.pageY - container.offsetTop;
    var dx = x - startX;
    var dy = y - startY;
    container.scrollLeft = scrollLeft - dx;
    container.scrollTop = scrollTop - dy;
  });
  
  container.addEventListener('mouseup', function() {
    isDragging = false;
  });
})();
```

Этот код добавляет простую функцию прокрутки содержимого при помощи jquery/js. Он активируется при перемещении мыши внутри контейнера `.scroll-container`. Вы можете добавить свои стили и использовать этот код в своем проекте.

Answer 2

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