scrollTop со смещением jQuery не работает должным образом в Firefox, если не происходит указатель мыши - PullRequest
Новая
       27

scrollTop со смещением jQuery не работает должным образом в Firefox, если не происходит указатель мыши

0 голосов
/ 30 октября 2019

Функция scrollHash(), приведенная ниже, предназначена для прокрутки до целевого якоря при настройке положения для отображения как фиксированного меню, так и требуемого margin-top.

Функция работает правильно в Chrome, однако она работает только в Firefox, если событие mouseout происходит до завершения функции (учитывая функции duration и setTimeout()). В противном случае, если мышь продолжает зависать над ссылкой в ​​Firefox на протяжении всего выполнения функции, функция не может завершить второй шаг корректировки позиции (вычитая фиксированную высоту меню из offset().top).

Это стоитотмечая, что проблема не присутствует в JSFiddle + Firefox (используя идентичный код и версию jQuery, 1.9.1), и я использую Firefox версии 69.0.3 (64-разрядная версия). Скрипка доступна здесь: https://jsfiddle.net/chayanyc/otkLa90x/

Фрагменты кода

CSS: 

body {margin: 0; padding: 0; height: 100%; overflow-x: hidden;}
* {box-sizing: border-box;}    
.header_container {height: var(--targetPosition); width: 100vw; margin: 0; padding: 0; position: fixed; top: 0; display: block;}
.main {margin-top: var(--topWrapper); width: 100%;}
.Section {padding: var(--sectPadding) 0; width: 100%;}    

@media (max-width: 600px) {
  :root {
    --sectPadding: 5rem;
  }
}

@media (min-width: 600px) {
  :root {
    --sectPadding: 9.5rem;
    --targetPosition: 9.3rem;
  }
}

JavaScript: 

// SCROLL HASH FUNCTIONS //
window.onhashchange = scrollHash;
function scrollHash() {
    menuHeight = document.getElementById('header').offsetHeight;        
    $('.TargetMark').removeClass('TargetMark')
    if (window.location.hash) {            
      $(window.location.hash).addClass('TargetMark')      
        $('html, body').animate({
          scrollTop: $('.TargetMark').offset().top - menuHeight
        }, 100);
    }
}

// SET MARGIN TOP //
var headerHeight;
function setTarget() {
  headerHeight = document.getElementById('header').offsetHeight;
  headerHeight = headerHeight + "px";
  document.documentElement.style.setProperty('--topWrapper', headerHeight);
}

$(document).ready(function () {
    setTarget();
});

$(window).resize(function () {
    setTarget();
});

вывод console.log 

// SAME OUTPUT IN CHROME VS. FIREFOX 
var offset = $('.TargetMark').offset();
console.log( (offset.top - topHeight) );

// DIFFERING OUTPUT IN CHROME VS. FIREFOX
var $window = $(window);
$(window).on('scroll', function () {
    $topOffset = $(this).scrollTop();
    console.log($topOffset);
});
...