#javascript #css #addeventlistener #onscrolllistener
#javascript #css #addeventlistener #onscrollistener
Вопрос:
-
Я создал функцию, которая добавляет / удаляет классы для навигации в зависимости от положения прокрутки окна. https://kmanadkat.github.io/navonscroll /
-
Он работает в Chrome для настольных компьютеров и мобильных устройств, но не работает в Firefox.Удивительно, но примеры, которые я упомянул на вышеупомянутом веб-сайте, работают в Firefox, но не на домашней странице.
-
Я много пытался найти ошибку, нет журнала консоли из функции window.onscroll . Я хочу сохранить этот плагин на чистом ванильном Javascript, тем не менее, я пробовал использовать обозначения со стрелками, чтобы посмотреть, исправляют ли они, но они не сработали.
- В Chromeвсе работает, просто firefox не может справиться с window.onscroll,
-
я даже пытался
window.addEventListener("scroll", function() {});
, но это тоже не работает, на вкладках, отличных от моего веб-сайта, я могу выполнять onscrollevents с помощью инструментов разработчика. -
Вот полный код плагина :
function hide_on_scroll(obj) {
// Throw Error if input type is not object or navid is not passed
if(typeof(obj)!=="object" || obj.nav_id===undefined){
throw new TypeError("Argument must be an Object, also confirm NavId");
}
// Get Function Paramenters
var nav_id = obj.nav_id;
var nav_offset = !!obj.nav_offset ? obj.nav_offset : 200;
var nav_position = !!obj.nav_position ? obj.nav_position : 'top';
var hide_onscroll_mobile = !!obj.hide_onscroll_mobile ? true : false;
var mobile_width = !!obj.mobile_width ? obj.mobile_width : 576;
nav_position = nav_position.toLowerCase();
// Prepare Navbar
var navbar = document.getElementById(nav_id);
if(navbar==undefined){throw new TypeError("Recheck Passed Navigation Id"); }
var nav_height = navbar.offsetHeight;
var navClasses = document.createElement('style');
navClasses.type = 'text/css';
navClasses.innerHTML =
'.nav-scroll-up{-webkit-transform: translateY(-' 78 'px);-ms-transform: translateY(-' 78 'px);transform: translateY(-' 78 'px);}'
'.nav-scroll-down{-webkit-transform: translateY(' 78 'px);-ms-transform: translateY(' 78 'px);transform: translateY(' 78 'px);}'
'.nav-scroll-fixed-' nav_position '{position: fixed;' nav_position ': 0;right: 0;left: 0;z-index: 1000;}'
'.nav-scroll-transition{will-change: transform; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);-o-transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);transition: transform 0.5s cubic-bezier(0.5, 0, 0.25, 1), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0.25, 1);}';
document.getElementsByTagName('head')[0].appendChild(navClasses);
navbar.classList.add('nav-scroll-transition');
navbar.classList.add('nav-scroll-fixed-' nav_position);
// Set Global Variables
var c=0;
var currentScrollTop = 0;
var scrollingClass = (nav_position==='top') ? 'nav-scroll-up' : 'nav-scroll-down';
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
// Get Current Viewport Width
window.onresize = function(){ width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);}
// Call Window OnScroll
window.onscroll = function() {
// disable Hide on scroll for mobile
if(hide_onscroll_mobile==false amp;amp; width<=mobile_width){
if(navbar.classList.contains(scrollingClass)){ navbar.classList.remove(scrollingClass); }
}
// Hide On Scroll for all screen if (width > mobile_width or mobile_width==true)
else{
var a = window.scrollY;
currentScrollTop = a;
if (c < currentScrollTop amp;amp; a > (2*nav_offset)) {
navbar.classList.add(scrollingClass);
}
else if (c > currentScrollTop amp;amp; !(a <= nav_offset)) {
navbar.classList.remove(scrollingClass);
}
c = currentScrollTop;
}
};
}
- Как я хочу вызвать это из html, приведенный выше код взят из файла
navonscroll.js
<script src="navonscroll.js"></script>
<script>
hide_on_scroll({
nav_id: 'myscrolling_nav',
hide_onscroll_mobile : true,
nav_offset : 10
});
</script>
Я надеюсь, что кто-нибудь мог бы помочь мне исправить это непосредственно в git и внести свой вклад в этот плагин с открытым исходным кодом или какое-нибудь исправление в stackoverflow также помогло бы.
Ответ №1:
По-видимому, это проблема с CSS, так что это будет неполный ответ (на самом деле это не моя область), но, похоже, window.scroll
событие вообще не запускается в Firefox из-за комбинации:
scroll-behavior: smooth;
наhtml
элементе,height: 100vh;
overflow: auto;
наbody
элементе.
Если вы удалите любое из этих правил из своего main.css
файла, то событие JS сработает снова.
Кто-то с большим опытом работы с CSS может понять, что происходит, и какой наиболее подходящий способ настроить эти правила, хотя мне это кажется ошибкой Firefox.
Комментарии:
1. Большое спасибо, Jeto, я постараюсь удалить эти свойства, если это возможно. Да, это имеет смысл, поскольку страницы примеров не имеют этих свойств css set, и он там работает.
2. Как вы выяснили проблему с css? Это поможет мне в будущем.
3. @KrupeshAnadkat Я скачал страницу и поиграл с материалом (в основном удаленные скрипты / CSS / etc), пока
window.scroll
не заработало. Кстати, вы должны принять ответ, если это помогло (маленькая зеленая галочка слева). Удачи!4. спасибо, я просто ждал других ответов. Но я только что решил проблему, скоро отправив ее на github. Не могли бы вы поддержать мой вопрос, я новичок в stackoverflow и нуждаюсь в нескольких баллах по репутации. Спасибо
5. Это достойный вопрос, поэтому я не возражаю против этого 🙂