Для создания универсального скроллинга, который будет работать и на ПК, и на мобильных устройствах, можно использовать CSS для стилизации и JavaScript для логики управления скроллингом при необходимости.
Чтобы реализовать горизонтальный скролл блока с дочерними элементами:
```css
/* CSS для родительского блока */
.scroll-container {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* CSS для дочерних элементов */
.scroll-item {
display: inline-block;
white-space: normal;
}
/* CSS для скрытия скроллбара */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
```
```html
<!-- HTML разметка -->
<div class="scroll-container hide-scrollbar">
<div class="scroll-item">Item 1</div>
<div class="scroll-item">Item 2</div>
<div class="scroll-item">Item 3</div>
<!-- и так далее -->
</div>
```
Для разделения поведения скроллинга между мобильными устройствами и ПК, можно использовать медиазапросы:
```css
/* CSS, специфичный для мобильных устройств */
@media (max-width: 768px) { /* Или другой размер, подходящий для вашего случая */
.scroll-container {
/* Возвращаем к обычному поведению скроллинга для мобильных устройств */
overflow-x: scroll;
}
}
```
Также существуют библиотеки и плагины, такие как Swiper, Flickity или Slick, которые предлагают готовые решения для создания каруселей и скроллбаров, и могут помочь реализовать более сложные сценарии прокрутки различных элементов. Они предоставляют гибкие опции для управления скроллингом, адаптивность для разных платформ и часто имеют встроенный функционал сенсорного управления, который полезен на смартфонах и планшетах.
Примеры использования этих плагинов могут выглядеть так:
```html
<!-- Swiper -->
<!-- Ссылки на CSS и JS файлы Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- HTML разметка для Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<!-- и так далее -->
</div>
</div>
<script>
// Инициализация Swiper
var mySwiper = new Swiper('.swiper-container', {
// Опции Swiper
slidesPerView: 'auto',
spaceBetween: 30,
freeMode: true,
// и другие опции по необходимости
});
</script>
```
Каждая библиотека имеет свои особенности и API, поэтому вам потребуется ознакомиться с их документацией, чтобы выбрать подходящую и правильно её использовать в соответствии с вашими требованиями.