Очень странное поведение Firefox: onclick + scrollBy работают случайным образом - PullRequest
Новая
       9

Очень странное поведение Firefox: onclick + scrollBy работают случайным образом

0 голосов
/ 25 сентября 2018

и извините, если мне не хватает чего-то очень простого, я только начинаю с JS.

У меня есть функция, чтобы браузер прокручивал до определенного раздела, когда пользователь нажимает на ссылку: 

function scrollToRegisterForm(event) {

const registerIntro = document.getElementsByClassName("register-intro")[0];
const registerIntroTop = registerIntro.offsetTop - 20;

console.log(registerIntro);
console.log(registerIntroTop);

window.scrollBy({
  top: registerIntroTop,
  left: 0,
  behavior:'smooth'
});

};

И затем у меня есть прослушиватель событий, чтобы связать функцию со ссылкой. 

document.addEventListener("DOMContentLoaded", function() {
  var linkToRegister = document.getElementsByClassName("login-or-register__register")[0];
  linkToRegister.onclick = scrollToRegisterForm;
});

Это прекрасно работает в Chrome, но в FireFox (и при условии Safari),поведение странноеКогда вы нажимаете на ссылку, она проходит через функцию, потому что выполняет строки "console.log".Хотя он не прокручивается.

Если я ввожу имя функции на консоли, она прокручивается.

Если я сойду с ума и начну нажимать на ссылку, в конце концов она прокрутится вниз.

Заранее большое спасибо!

Вы можете найти ее в http://marccamprecios.com/kojima/kodata.html#

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Согласно моему комментарию, я не могу воспроизвести проблему в FF в jsfiddle.

В качестве первоначального устранения проблемы убедитесь, что вы включили этот JS в конец вашего HTML-документа.

В противном случае вы можете попробовать:

  1. Добавление preventDefault();

  2. изменение scrollBy на scrollTo

  3. избавление от левого торса 

function scrollToRegisterForm(event) {

event.preventDefault();

const registerIntro = document.getElementsByClassName("register-intro")[0];
const registerIntroTop = registerIntro.offsetTop - 20;

console.log(registerIntro);
console.log(registerIntroTop);

window.scrollTo({
  top: registerIntroTop,
  behavior:'smooth'
});

};

document.addEventListener("DOMContentLoaded", function() {
  var linkToRegister = document.getElementsByClassName("login-or-register__register")[0];
  linkToRegister.onclick = scrollToRegisterForm;
});
<a href="#" class="login-or-register__register">Register</a>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<p>ok</p>
<h2 class="register-intro">REGISTER HEADER</h2>
0 голосов
/ 25 сентября 2018

Проблема в том, что у вас есть href="#", который переносит вас в начало страницы и мешает вашей функции.

Вместо этого вы можете использовать: 

<a href="javascript:void(0)">link</a>
...