Привет, ребята, Прежде всего, если это дубликат, пожалуйста, несите меня, так как любые подобные мне вопросы не были удовлетворены.scrollTop возвращает гораздо меньшее значение для div в firefox
Ссылка Ссылка: http://old.crazyripples.com/?debug=1
Итак, я использую JQuery и плагин JQuery Вся страница. Это помогает мне добиться прокрутки по кадрам.
Теперь для внутренних див, где вертикальная высота больше, чем высота окна я использовал некоторые функции, где я просто проверить на позицию прокрутки и stopPropagation плагиной, так что внутренние прокручивают полосы прокрутки без сдвига рамки.
Все работает отлично с хромом, и поскольку я построил с хромом, я использовал некоторые вычисления, которые я наблюдал на хроме. Но firefox показывает разные результаты, особенно с scrollTop.
Мне известно о том, что разница в высоте может быть разной, но если вы увидите журналы в ссылочной ссылке, вы увидите, что высота почти одинаковая (даже если она не для вас, ее scrollTop значение, которое является проблемой).
Вот код, который я использую, чтобы решить, следует ли прекратитьпрограммирование или нет.
$(document).on("keydown",function(e){
\t var story=$("#story"),
\t \t story_con=story.find(".container"),
\t \t story_top=story_con.scrollTop();
\t if(story.hasClass("active")){
\t \t // console.log(story_top,story_con.height(),story_con.innerHeight(),story_con.children("div").height(),story_con.children("div").innerHeight(),e.which);
\t \t console.log("Div ScrollTop: "+story_top, "Container Height: "+story_con.height(), "Container InnerHeeight: "+story_con.innerHeight(),"Conatiner Div Height: "+story_con.children("div").height());
\t \t //up arrow
\t \t if(story_top==0 && e.which==38){
\t \t \t console.log("prev frame")
\t \t }
\t \t //down arrow
\t \t //chrome 280+432 >= 676 i.e. 712>=676 true
\t \t //firefox 207+429 >= 676 i.e 636>=676 false
\t \t else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){
\t \t \t console.log("next frame");
\t \t }
\t \t else{
\t \t \t story_con.focus();
\t \t \t console.log(story_con[0]);
\t \t \t console.log("stopped propagation");
\t \t \t e.stopImmediatePropagation();
\t \t }
\t \t return;
\t }
});И это, как я называю плагин:
$('#main').fullpage({
\t sectionSelector:'.frame',
\t scrollingSpeed:800,
\t responsiveWidth:1025,
\t normalScrollElements: '#story, #startups, #services',
});Replication: Перейти к опорному ссылке. Перейдите ко второму разделу (Наша история) с помощью прокрутки, клавиш со стрелками или меню. Теперь используйте клавиши со стрелками, кадр должен прокручиваться в обычном режиме, но когда прокрутка завершена, он должен перейти к следующему кадру (это делается в Chrome). Подробнее см. В журналах js.
Мне бы очень понравилось, если бы кто-нибудь мог мне помочь. Я пытался отлаживать это на некоторое время. Может быть, я сосредотачиваюсь на неправильном вопросе? Любая помощь будет оценена по достоинству.
P.S. Я знаю, что плагин предлагает параметр scrollOverflow. Это вызвало больше проблем, чем этот подход.
Обновление: Поскольку я не смог найти какое-либо решение, поэтому я изменил свой подход к обнаружению, если рамка прокрутки рамки достигла конца. Я использовал это:
//down arrow
else if(container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight){
console.log("next frame");
}
Из-за любопытства, почему вы не использовали функцию scrollOverflow для fullPage.js для создания полос прокрутки как [в этом примере] (http://alvarotrigo.com/fullPage/examples/scrolling.html) ? – Alvaro
Для параметра scrollOverflow требуется внешний файл js. Кроме того, этот вариант не работал стабильно для меня. Возможно, что я использовал flexbox, может быть, и причина. – SuperNOVA
Я бы удостоверился, что у вас нет проблем с сенсорными устройствами с вашим подходом. – Alvaro