Я добавил кастомный плагин на плавный скролл между секциями сайта (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...