Возникает странная ошибка при использовании события колеса полностраничного сценария.Jquery

Программирование на jquery
Ответить
Anonymous
 Возникает странная ошибка при использовании события колеса полностраничного сценария.

Сообщение Anonymous »

При использовании события колеса полностраничного сценария возникает странная ошибка.
При использовании события колеса в источнике при достижении разделов 3 и 4 возникает проблема: содержимое, показанное в каждом разделе, отображается с опозданием. . Чтобы вернуться в раздел при обновлении, History.pushState(null, null, "#" +currentSectionId); Я использовал его, но он работает не очень хорошо. Есть ли ошибки в этом источнике?
Помощь
function handleDisplaySize() {
var displayWidth = $(window).width();

if (displayWidth >= 1281 && displayWidth < 1921) {
$(window).on("wheel", wheelEventHandler);
} else {
$(window).off("wheel", wheelEventHandler);
sessionStorage.removeItem("currentSectionPage");
history.pushState(null, null, window.location.pathname);
}
}

function wheelEventHandler(e) {
// var lastPosTop = Number(4 * $(window).height()) - Number($(window).height());
var lastPosTop = Number(4 * $(window).height()) - Number($(window).height() / 5);
var scrollValue = $(document).scrollTop();
if (mHtml.is(":animated")) return;
if (e.originalEvent.deltaY > 0) {
if (page == 5) return;
page++;
} else if (e.originalEvent.deltaY < 0) {
if (page == 1) return;
if(lastPosTop > scrollValue) page--;
$("html, body").css("overflow", "hidden");
}
if (page == 5 && e.originalEvent.deltaY > 0) {
var section5Top = $('#section5').offset().top - 100;
$("html, body").animate({ scrollTop: section5Top }, 500);
}

var posTop = (page - 1) * $(window).height();
//mHtml.animate({ scrollTop: posTop }, 500);
//var scrollValue = $(document).scrollTop();

if (page == 5) {
$("html, body").css("overflow", "auto");
}else{
mHtml.animate({ scrollTop: posTop }, 500);
}

$(".section_one").each(function(index) {
var offset = $(this).offset().top;
var height = $(this).outerHeight();
var top = $(document).scrollTop();
var id = $(this).attr('id');

if (top >= offset && top < offset + height) {
$("#sidebar li").removeClass("active");
$("#sidebar li:eq(" + index + ")").addClass("active");
history.pushState(null, null, "#" + id);
return false;
}
});

updateActiveSection();
var currentSectionId = $(".content_one .section_one").eq(page - 1).attr("id");
sessionStorage.setItem("currentSectionPage", page);
history.pushState(null, null, "#" + currentSectionId);

}

$("#sidebar a").on("click", function (e) {
e.preventDefault();
var targetSection = $(this).attr("href");
var sectionTop = $(targetSection).offset().top;
var isSection5 = targetSection === "#section5";

$("html, body").css("overflow", isSection5 ? "auto" : "hidden");

$("html, body").animate({ scrollTop: sectionTop }, 500, function() {
if (!isSection5) {
$("html, body").css("overflow", "hidden");
}
$(targetSection).siblings().removeAttr("tabindex");
$(targetSection).attr("tabindex", 0);
$(targetSection).focus();
});

page = $(targetSection).index() + 1;
updateActiveSection();
sessionStorage.setItem("currentSectionPage", page);
history.pushState(null, null, targetSection);
});

$("#sidebar a").on("keydown", function (e) {
if (e.key === "Enter") { // Enter 키
e.preventDefault();
var targetSection = $(this).attr("href");
$(this).click();
}
});

$(".section_one a , .section_one button").on("focus", function () {
var parentSection = $(this).closest(".section_one");
var sectionIndex = $(".section_one").index(parentSection);
$("#sidebar li").removeClass("active");
$("#sidebar li:eq(" + sectionIndex + ")").addClass("active");
sessionStorage.setItem("currentSectionPage", sectionIndex + 1);
page = sectionIndex + 1;
var currentSectionId = parentSection.attr("id");
history.pushState(null, null, "#" + currentSectionId);
});

function updateActiveSection() {
$("#sidebar li").removeClass("active");
$(".content_one .section_one").removeClass("onmove");
$("#sidebar li").eq(page - 1).addClass("active");
$(".content_one .section_one").eq(page - 1).addClass("onmove");
}

var mHtml = $("html");
var page = 1;
mHtml.animate({ scrollTop: 0 }, 10);
$(window).resize(handleDisplaySize);

handleDisplaySize();

adjustSectionHeight();
$(window).resize(adjustSectionHeight);
var pageHeight = $(window).height();
var savedPage = sessionStorage.getItem("currentSectionPage");
if (savedPage) {
page = parseInt(savedPage);
var posTop = (page - 1) * $(window).height();
mHtml.animate({ scrollTop: posTop }, 500);
updateActiveSection();
}
function adjustSectionHeight() {
var windowWidth = $(window).width();
if (windowWidth >= 1281 && windowWidth < 1921) {
var windowHeight = $(window).height();
$('.section_one').css('height', windowHeight + 'px');
} else {
$('.section_one').css('height', 'auto');
}
$('#section5').css('height', 'auto');
}

$( '.search_btn button' ).click( function() {
$( '.search_wrap' ).toggleClass( 'on' );
} );

$('.search_wrap .search_btn button').on('focusout', function() {
$('.search_wrap').removeClass('on');
});

$('.search_wrap .keyword-btn button').on('focus', function() {
$('.search_wrap').addClass('on');
});


Подробнее здесь: https://stackoverflow.com/questions/786 ... heel-event
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»