Задать вопрос
@DayHunter

Как сделать поле ввода формы кликабельным?

Я добавил кастомный плагин на плавный скролл между секциями сайта (1-о страничный), в последней секции находится форма, поля которой перестали быть в принципе кликабельными после этого.
Код плагина
$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }

            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};

(function($){
    $.fn.extend({
        pageScroller: function(options) {
            this.defaultOptions = {
                travelTime:1000,
                afterTravelTimeout:1,
                travelEasing:'swing',
                startingPage:0,
                anchors:[],
                scrollableClasses: 'section',
                onTrigger : function(none, targets) {},
                onEnd : function(none, targets) {}
            };

            var settings = $.extend({}, this.defaultOptions, options);
            // Добавляем стили для скрытия скроллбара
            const styles = `
                <style>
                    ${settings.scrollableClasses} {
                        overflow-y: auto; /* Позволяет вертикальную прокрутку */
                        -ms-overflow-style: none;  /* Internet Explorer */
                        scrollbar-width: none; /* Firefox */
                    }
                    /*
                    ${settings.scrollableClasses}::-webkit-scrollbar {
                        display: none; /* Скрыть скроллбар для WebKit-браузеров */
                    }
                    */
                </style>
            `;
            $('head').append(styles); // Добавляем стили в <head>

            return this.each(function() {
                var $this = $(this);
                var cleared = true;

                //        INIT
                $this.children().eq(settings.startingPage).addClass('current');
                $('body').css('overflow','hidden');
                $(window).scrollTop($this.children().eq(settings.startingPage).offset().top);

                $('body').scroll(function(e){
                    // e.preventDefault();
                })

                $(window).on('beforeunload', function() {
                    $(window).scrollTop(0);
                });

                $('body').wheel(function (e) {
                    // Проверка на открытое мобильное меню
                    const isMobileMenuOpen = $('#menu__toggle').is(':checked');
                    if (isMobileMenuOpen) {
                        // Если меню открыто, блокируем скролл и выходим
                        return;
                    }

                    // Проверка, находится ли событие прокрутки внутри секции с прокруткой
                    if ($(e.target).closest(settings.scrollableClasses).length) {
                        const target = $(e.target).closest(settings.scrollableClasses)[0];

                        // Определяем, можно ли прокручивать внутри секции
                        const scrollTop = target.scrollTop;
                        const scrollHeight = target.scrollHeight;
                        const offsetHeight = target.offsetHeight;

                        if (e.delta > 0) {
                            // Прокрутка вниз
                            if (scrollTop + offsetHeight < scrollHeight) {
                                return; // Прокрутка внутри секции
                            }
                        } else {
                            // Прокрутка вверх
                            if (scrollTop > 0) {
                                return; // Прокрутка внутри секции
                            }
                        }
                    }

                    // Если мобильное меню закрыто, запускаем стандартный скрипт скроллинга
                    if (cleared) {
                        if (e.delta > 0) {
                            if ($('.current', $this).next().length > 0) {
                                cleared = false;
                                var nxt = $('.current', $this).next();
                                var curr = $('.current', $this);
                                settings.onTrigger.call(undefined, { current: curr, next: nxt });
                                $('.current', $this).removeClass('current');
                                nxt.addClass('current');
                                $('html, body').animate({
                                    scrollTop: nxt.offset().top
                                }, settings.travelTime, settings.travelEasing);
                                setTimeout(function () {
                                    settings.onEnd.call(undefined, { current: nxt, previous: curr });
                                    setTimeout(function () {
                                        cleared = true;
                                    }, settings.afterTravelTimeout);
                                }, settings.travelTime);
                            }
                        }
                        // Прокрутка вверх
                        else {
                            if ($('.current', $this).prev().length > 0) {
                                cleared = false;
                                var prv = $('.current', $this).prev();
                                var curr = $('.current', $this);
                                settings.onTrigger.call(undefined, { current: curr, next: prv });
                                $('.current', $this).removeClass('current');
                                prv.addClass('current');
                                $('html, body').animate({
                                    scrollTop: prv.offset().top
                                }, settings.travelTime, settings.travelEasing);
                                setTimeout(function () {
                                    settings.onEnd.call(undefined, { current: prv, previous: curr });
                                    setTimeout(function () {
                                        cleared = true;
                                    }, settings.afterTravelTimeout);
                                }, settings.travelTime);
                            }
                        }
                    }
                });
    });
})(jQuery);

Его инициализация
let isScrolling = false;

$(document).ready(function () {
    $('#snap-container').pageScroller({
        travelTime: 1000,
        afterTravelTimeout: 0.1,
        travelEasing: 'swing',
        onTrigger: function () {
            isScrolling = true;
            setTimeout(() => {
                isScrolling = false;
            }, 1000);
        },

    });

    // Обработчик для кликов по якорям
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        $(anchor).click(function (e) {
            e.preventDefault(); // Отменяем стандартное поведение ссылки

            const targetId = $(this).attr('href');
            const $targetElement = $(targetId);
            console.log($targetElement)
            if ($targetElement.length && !isScrolling) {
                const $currentElement = $('.current', $('#snap-container'));
                if (!$targetElement.is($currentElement)) {
                    isScrolling = true;
                    $currentElement.removeClass('current');
                    $targetElement.addClass('current');

                    $('html, body').animate({
                        scrollTop: $targetElement.offset().top
                    }, 1000, 'swing', function () {
                        isScrolling = false;
                    });
                }
            }
        });
    });

    window.addEventListener('wheel', function (e) {
        if (isScrolling) {
            e.preventDefault();
        }
    }, {passive: false});
    
});

Форма самая обычная на 2 поля. Type = text, Type = tel.
Код плагина урощен в меру размера. Оригинальный код плагина - https://www.jqueryscript.net/slider/touch-fullpage...
  • Вопрос задан
  • 96 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
1) Данный код ничего в плане понимания проблемы не дает
2) Неработающий/работающий неверно код большого объема желательно вносить в фиддл, чтобы смотреть на живой пример, а не на абстрактные "два поля".
3) Рискну предположить что элементы лежат в области, накрытой другим элементом, по этому клик по ним не проходит, смотрите какие элементы у вас в этой области. Что-то более конкретное можно сказать только по "живому" примеру.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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