Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2021, 11:43
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 68

Плавный горизонтальный скрол
Использую эту библиотеку для горизонтального скрола https://pcvector.net/scripts/slidesh...-kontenta.html...
но нет плавности, когда скролишь есть подергивания, есть ли какие-нибудь решения ?

Последний раз редактировалось venom1996, 08.04.2021 в 12:19.
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2021, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,140

venom1996,
ссылку поправьте.
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2021, 12:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,140

venom1996,
на всякий случай ... https://alvarotrigo.com/fullPage/ext...izontally.html
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2021, 12:20
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 68

поправил, так вот нужен не сам слайд эффект, а именно скрол колёсиком, как тут https://www.ivantoma.com/about/

Последний раз редактировалось venom1996, 08.04.2021 в 12:28.
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2021, 13:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,140

горизонтальная прокрутка
venom1996,
минимальная версия ... -50 : 50; при желании можно изменить
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .slider {
            width: 100vww;
            height: 200px;
            overflow: hidden;
        }
        .line {
            background-color: #00FFFF;
            display: flex;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector(".slider"),
                line = document.querySelector(".line"),
                x = 0;
            function move(event) {
                event.preventDefault();
                var delta = event.deltaY || event.detail || event.wheelDelta;
                x += 0 <= delta ? -50 : 50;
                setX()
            }
            function setX()
            {
               x = Math.max(0, Math.min(line.scrollWidth - elem.clientWidth, x));
               line.style.transform = "translateX(" + -x + "px)"
            }
            elem.addEventListener("mousewheel", move);
            elem.addEventListener("DOMMouseScroll", move);
            window.addEventListener("resize", setX);
        })
    </script>
</head>
<body>
    <div class="slider">
        <div class="line">
            <img src="https://picsum.photos/200/200?1">
            <img src="https://picsum.photos/200/200?2">
            <img src="https://picsum.photos/200/200?3">
            <img src="https://picsum.photos/200/200?4">
            <img src="https://picsum.photos/200/200?5">
            <img src="https://picsum.photos/200/200?6">
            <img src="https://picsum.photos/200/200?7">
            <img src="https://picsum.photos/200/200?8">
            <img src="https://picsum.photos/200/200?9">
        </div>
    </div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2021, 14:00
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 68

у меня всё работает с тем плагином smooth-div-scroll, только плавности нет никакой
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавный скрол к id StartGames Общие вопросы Javascript 2 23.12.2020 19:44
плавный горизонтальный скрол div-ов внутри div sasko Общие вопросы Javascript 2 14.02.2019 16:34
Не отображается горизонтальный скрол javaphp Events/DOM/Window 4 03.01.2016 14:01
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30
Горизонтальный скрол iframe arahmanov Элементы интерфейса 5 19.05.2014 20:16