Не работает скрол блока в модальном окне?

Question

[r4skolov]

Использую плагин fullpaje.js
Есть модальное окно в нем есть блок который должен скролиться вертикально, с компа скрол работает но в мобильной версии тач скролл перестает работать, предполагаю есть конфликт с fullpaje т.к он отключает скролл, как пофиксить?

Comments

[Aleksandr-JS-Developer]

После внимательного изучения вашего кода через волшебный шар, я пришёл к выводу, что ошибка на 44-ой строке.

[Эмиль 🔥]

Aleksandr-JS-Developer, Нет, все же на 95 строке

[Алексей]

Эмиль 🔥, ставлю на 72-ую строку

[r4skolov]

Aleksandr-JS-Developer, Эмиль 🔥, Алексей, код чего нужен

[Алексей]

r4skolov, запуска баллистической ракеты. Кусок кода который не работает на таче, я без понятия что за fullpaje

[r4skolov]

Алексей, чел ты либо нормально отвечай либо вообще не отвечай

[Алексей]

r4skolov, ты либо нормально вопросы оформляй, либо вообще этого не делай. Мало того что я итак написал какой код нужен, дак это еще по комментариям помойму очевидно. Экстрасенсов здесь не водится, дай кусок кода в котором у тебя чтото не работает как надо и мы уже тогда сможем хотябы предположить что не так.

[r4skolov]

Алексей, я долже 3000 строк плагина fullpaje сюда скинуть? я задал вопрос с целью если кто то сталкивался с таким, можешь сюда не отписывать уже

[Алексей]

r4skolov, тоесть у тебя страница состоит только из подключенного плагина и больше ты ничего не писал ? Тег body у тебя тоже пустой ? fullPage в открытом доступе, в отличии от твоего кода

[r4skolov]

Алексей, проблема только тогда когда работает fullpaje

[Антон]

r4skolov, Очевидно, что достаточно скинуть рабочий вариант страницы. Библиотека работает нормально и все в ней работает, а если что-то где то не скроллится, значит это ошибки верстки и окружения, а именно - ошибка создателя сего и данный пример - частный пример, который требует индивидуального взгляда, а значит нужен пример...
Вы как будто к врачу на прием записались через скайп, "Доктор, у меня живот болит, поставьте мне диагноз и вышлите аттачем в наш чат"

[Павел Корнилов]

Как частый вариант ошибки -- может быть перезапись одного из обработчиков событий в кастомном коде. Тогда будут проблемы с событиями.

[Алексей]

r4skolov, давай сразу определимся, потому что 1 раз ошибиться еще можно, но делать это на постоянке я хз. Плагин у тебя fullpaje или fullPage ? а то может ты вообще свой плагин сделал и мы о разном говорим.

И проблема не когда у тебя плагин работает, а когда ты пишеш свою страницу с использованием плагина. Даже не представляю сколько раз нужно написать, чтобы ты скинул СВОЙ код, мне не нужен плагин, можешь не скидывать, его я подключу сам, скинь то что ТЫ своими руками писал. Все секции и инициализацию плагина.

[Aleksandr-JS-Developer]

r4skolov,

Код нужен для того, чтобы было над чем работать. Судя по-всему, ваш код конфликтует с библиотекой, которую вы хотите подключить. Ваш код нужен для того, чтобы понять где конфликт и устранить его или, если устранить невозможно, думать над альтернативой.

Не обижайтесь, как ребенок. Вы задали некорректно сформулированный вопрос. Это, даже, не вопрос, а просто утверждение. Сначала ознакомьтесь с правилами задавания вопросов на этой площадке, а потом уже лезьте.

У вас есть прекрасная возможность задать его по-новому.

1. Суть проблемы
2. Как вы пытались её решить, что думаете/поняли/какие выводы
3. ВАШ Код (все фрагменты, которые связаны с плагином, подключение, конфиги, и т. д.). Если кода много - то ссылку на репозиторий GitHub/GitLab/и т. д.
4. Ссылка на плагин (на страницу плагина на npmjs.com, например)

P.S. Вся магия этого (и любого другого форума), в том, что вы задаёте вопрос, а другие люди БЕСПЛАТНО вам на него отвечают за своё время. Уважайте тех, кому вы задали вопрос и вам будут с радостью помогать. Нет - до свидания.

[r4skolov]

Aleksandr-JS-Developer, Алексей, Павел Корнилов, Антон, извиняюсь за некорректное поведение.
Я бот в верстке только начинаю и соответсвенно в js.
Вот ссылка на пример https://r4skolov.github.io/test

Нажав плюс открывается модальное окно, и в нем есть блок с текстом который можно скролить колесом мыши но в мобильной версии тачскролл не работает

Answer 1

[Aleksandr-JS-Developer]

Нашёл причину. Методом не научного тыка. С CSS всё в порядке.

Вкладка обработчиков событий в девтуле.
Короче говоря, в fullPage (js/fullpage.extensions.min.js: 8) навешивается обработчик на событие "touchmove" (это одно из, так называемых, тач-событий). Так вот, при его удалении скрол работает нормально. В доках на странице библиотеки на гитхабе ничего не нашел про это. Наверняка там есть конфиг какой-то.
Зато нашел гору пуллреквестов с репортами про разные баги...

Скрол не работает в эмуляции мобилки хромовского девтула после перезагрузки потому, что страница грузится уже с другим юзер-агентом.

Вывод:
fullPage.js навешивает обработчик, при удалении которого всё работает как нужно.

Comments

[r4skolov]

в хромовской эмуляции скролл работает до обновления, то есть он есть при первом запуске, если обновить сраницу скролл пропадает

[Aleksandr-JS-Developer]

Нашел причину (или одну из них). Переписал ответ.

[r4skolov]

Aleksandr-JS-Developer, я извиняюсь за тупость, вот нашел тот код который отвечает за тачскролл, как его изменить что бы все работало корректно, если его удалить полность тогда fullpaje перестает работать

function ue(e) {
                e ? (se(!0), function () {
                    if ((l || u) && (!_t("dragAndMove") || "mouseonly" === g.dragAndMove)) {
                        g.autoScrolling && (m.removeEventListener(I.touchmove, ze, {
                            passive: !1
                        }), m.addEventListener(I.touchmove, ze, {
                            passive: !1
                        }));
                        var e = g.touchWrapper;
                        e.removeEventListener(I.touchstart, je), e.removeEventListener(I.touchmove, Be, {
                            passive: !1
                        }), e.addEventListener(I.touchstart, je), e.addEventListener(I.touchmove, Be, {
                            passive: !1
                        })
                    }
                }()) : (se(!1), function () {
                    if (l || u) {
                        g.autoScrolling && (m.removeEventListener(I.touchmove, Be, {
                            passive: !1
                        }), m.removeEventListener(I.touchmove, ze, {
                            passive: !1
                        }));
                        var e = g.touchWrapper;
                        e.removeEventListener(I.touchstart, je), e.removeEventListener(I.touchmove, Be, {
                            passive: !1
                        })
                    }
                }())
            }

[Aleksandr-JS-Developer]

Код минифицирован, что такое l/_t/ect? Да и сама структура довольно странная. Вся функция это, по-сути, один большой тернарный оператор.

Так-же если выставить passive: true, при навешивании события, то скрол тоже работать начинает. Правда непонятно, какую логику можно сломать этим. Как-бы хуже не стало. Сразу надо у обработчика события проверять, пассивное ли оно, если да, то не вызывать e.preventDefault, потому, что у пассивных событий нельзя его использовать. Впрочем, error в консоль быстро всё объяснит.

Советую, всё-таки, отказаться от этой библиотеки. Или запилить самому функционал, или найти альтернативную. Или, может, вы её неправильно используете. Может, не тот селектор передали куда не надо...

Но попробуйте, не знаю что-ли, методом тыка, потоглить (или поменять все) строки "passive: !1" на "passive: !0". ( 1 == true, !1 == false, кстати, при строгом сравнении, ===, так не работает )
Вот эти строки:

Опять-таки, вы можете сейчас сломать какую-то другую важную логику!!.

[r4skolov]

Aleksandr-JS-Developer, спасибо за ответ и помощь