#javascript #jquery #firefox #scrolltop #fullpage.js
#javascript #jquery ( jquery ) #firefox #верхушка прокрутки #fullpage.js
Вопрос:
Ссылка на ссылку: http://old.crazyripples.com/?debug=1
Итак, я использую jQuery и плагин jQuery fullPage. Это помогает мне добиться покадровой прокрутки.
Теперь, для внутренних разделов, где вертикальная высота больше высоты окна, я использовал некоторые функции, в которых я просто проверяю положение полосы прокрутки и останавливаю распространение плагина, чтобы внутренняя полоса прокрутки прокручивалась без сдвига рамки.
Все прекрасно работает с Chrome, и поскольку я работал с Chrome, я использовал некоторые вычисления, которые я наблюдал в chrome. Но firefox показывает разные результаты, особенно с scrollTop.
Я осознаю тот факт, что может быть разница в высоте, но если вы увидите журналы в ссылочной ссылке, вы увидите, что высота почти одинакова (даже если это не для вас, проблема заключается в значении scrollTop).
Вот код, который я использую, чтобы решить, останавливать распространение или нет.
$(document).on("keydown",function(e){
var story=$("#story"),
story_con=story.find(".container"),
story_top=story_con.scrollTop();
if(story.hasClass("active")){
// console.log(story_top,story_con.height(),story_con.innerHeight(),story_con.children("div").height(),story_con.children("div").innerHeight(),e.which);
console.log("Div ScrollTop: " story_top, "Container Height: " story_con.height(), "Container InnerHeeight: " story_con.innerHeight(),"Conatiner Div Height: " story_con.children("div").height());
//up arrow
if(story_top==0 amp;amp; e.which==38){
console.log("prev frame")
}
//down arrow
//chrome 280 432 >= 676 i.e. 712>=676 true
//firefox 207 429 >= 676 i.e 636>=676 false
else if(story_top story_con.height() >=story_con.children("div").height() amp;amp; e.which==40){
console.log("next frame");
}
else{
story_con.focus();
console.log(story_con[0]);
console.log("stopped propagation");
e.stopImmediatePropagation();
}
return;
}
}); И вот как я вызываю плагин:
$('#main').fullpage({
sectionSelector:'.frame',
scrollingSpeed:800,
responsiveWidth:1025,
normalScrollElements: '#story, #startups, #services',
}); Репликация:
Перейдите по ссылочной ссылке. Перейдите ко второму разделу (наша история) с помощью прокрутки, клавиш со стрелками или меню. Теперь используйте только клавиши со стрелками, рамка должна прокручиваться нормально, но когда прокрутка завершится, она должна перейти к следующему кадру (это делается в Chrome). Более подробную информацию см. в журналах js.
Я был бы рад, если бы кто-нибудь мог мне как-то помочь. Я пытался отладить это какое-то время. Может быть, я фокусируюсь не на той проблеме? Любая помощь будет оценена.
PS Я знаю, что плагин предлагает опцию scrollOverflow. Это вызывало больше проблем, чем такой подход.
Обновление: Поскольку я не смог найти такого конкретного решения, я изменил свой подход к определению того, достигла ли полоса прокрутки фрейма своего конца. Я использовал это:
//down arrow
else if(container[0].offsetHeight container[0].scrollTop >= container[0].scrollHeight){
console.log("next frame");
}
Комментарии:
1. Из любопытства, почему вы не использовали
scrollOverflowфункцию fullPage.js чтобы создать полосы прокрутки, как в этом примере ?2. Для параметра scrollOverflow требуется внешний js-файл. Кроме того, эта опция не работала стабильно для меня. Возможно, причиной может быть то, что я использовал flexbox.
3. Я бы позаботился о том, чтобы у вас не было проблем на сенсорных устройствах с вашим подходом.
4. Я бы открыл новый вопрос, не будучи таким конкретным. Просто спросите, как получить одинаковое значение для Firefox и Chrome для прокручиваемого элемента. Вы получите гораздо больше ответов на короткий и более общий вопрос.
5. «Не использовать Firefox» вы, должно быть, шутите, или я что-то упускаю?
Ответ №1:
* Это начало моего ответа, поскольку я продолжаю отладку, чтобы предоставить вам более подробную информацию.
В настоящее время при использовании Firefox версии 49.0.1 для окон размером менее 1280 пикселей ваш контент внутри ваших container классов слишком высок.
Текущее доказательство: в ваших divs, #story , #partners , и #services , если вы, где указать div , что является прямым дочерним элементом div.container в каждом из основных разделов height: 200px , все ваши нажатия клавиш со стрелкой вниз будут работать.
Редактировать 1 в magic.js строка 111 — это то место, где начинается ваша проблема.
else if(story_top story_con.height() >=story_con.children("div").height() amp;amp; e.which==40){
Содержимое в каждом из ваших контейнеров, story_con.children("div").height() , иногда больше, чем story_top story_con.height() , поэтому оно не переходит на следующий путь страницы, который вы хотите.
Конечно, все это зависит от высоты окна.
Ваш журнал отладки подтверждает мою точку зрения: 
Комментарии:
1. Хорошо, прежде всего, большое спасибо за помощь. Теперь я изменил размер своего окна до 1280, и оно отлично работает в Chrome. На самом деле, он работает в Chrome независимо от размеров. В firefox (та же версия) я установил div.container>div height на 200 пикселей, и это работает, но для этого есть простая причина. Для высоты, меньшей, чем окно, полоса прокрутки не будет присутствовать, а условие в строке 111 оценивается как true, и загружается следующий кадр.
2. Это верно для любой высоты div, меньшей высоты окна. Теперь строка 111 просто означает, что если клавиша со стрелкой нажата и мы достигли конца позиции прокрутки. Все вычисления будут выполняться правильно, если переменная story_top(scrollTop) приведет к значению, такому же, как у chrome, чего у нее нет.
3. Хорошо 🙂 Я рассмотрю, почему scrollTop отличается в Chrome от Firefox
4. Похоже, функция .scrollTop() плохо работает в Firefox. Сегодня после работы я постараюсь написать для вас обходной путь
Ответ №2:
Простой ответ заключается в том, что Chrome и Firefox отображают страницы по-разному. Чтобы понять, почему вы получаете различия в рендеринге, взгляните на это объяснение
Я надеюсь, что это очистит его.
Комментарии:
1. Я действительно осознаю это. Но в данном контексте я не знаю, поможет ли это. Прежде всего, я не имею дело с шириной, это проблема высоты и прокрутки. Возможно, это могло бы иметь дело аналогичным образом с высотой, но единственная высота, которую я указал, — 100vh, и есть только 1 дочерний элемент. Даже если я каким-то образом считаю, что это реальная проблема, разница в 5-10 пикселей будет иметь смысл, но если вы посмотрите журналы, разница в значениях Chrome и Firefox составляет почти 80 пикселей (для меня).) Итак, я думаю, это не причина.