Почему некоторые скрипты не работают в Opera, Google Chrome?

Question

Не работающие скрипты:

//Scroll to Top button
var scrollToTopButton = document.querySelector('.up-scroll');
if(window.addEventListener) {
 window.addEventListener('scroll', topScrollButtonViev);
} else {
 window.attachEvent('onscroll', topScrollButtonViev);
}
function topScrollButtonViev(event) {
 event = event || window.event;
 if (event.pageY >= 300) {
  scrollToTopButton.classList.remove('up-scroll_unviev');
 } else {
  scrollToTopButton.classList.add('up-scroll_unviev');
 }
}
if(scrollToTopButton.addEventListener) {
 scrollToTopButton.addEventListener('click', topScroll);
} else {
 scrollToTopButton.attachEvent('onclick', topScroll);
}
function topScroll() {
var topInterval = setInterval(topScrollUpSteps, 10);
 function topScrollUpSteps () {
  if (window.pageYOffset >= 1) {
   window.scrollBy(0, -80);
   console.log(window.pageYOffset);
  } else {
   clearInterval(topInterval);
  }
 }
}

//Swimming header
if(window.addEventListener) {
 window.addEventListener('scroll', swimHeader);
} else {
 window.attachEvent('onscroll', swimHeader);
}
function swimHeader(event) {
 event = event || window.event;
 var header = document.querySelector('header');
 var headerStyle = header.style;
 var neibourElement = document.querySelector('.your_invetnory');
 if (event.pageY >= 100) {
  headerStyle.position = 'fixed';
  headerStyle.top = '0';
  headerStyle.left = '0';
  headerStyle.width = '100%';
  headerStyle.zIndex = '1000';
  headerStyle.animation = 'headerOpacity 1s 1 ease';
  neibourElement.style.paddingTop = '78px';
 } else {
  headerStyle.position = 'static';
  neibourElement.style.paddingTop = '0';
  headerStyle.animation = '0';
 }
}

Работающие скрипты:

// Drop-down language
var dropDownLanguage = document.querySelectorAll('.drop-down_language');
for(var i = 0; i<dropDownLanguage.length; i++) {
 if(dropDownLanguage[i].addEventListener) {
  dropDownLanguage[i].addEventListener('click', OpenDropDownLanguage);
 } else {
  dropDownLanguage[i].attachEvent('onclick', OpenDropDownLanguage);
 }
}
function OpenDropDownLanguage() {
 var hiddenDropDown = document.querySelectorAll('.hidden_drop-down_language');
 for(var i = 0; i<hiddenDropDown.length; i++) {
  if (hiddenDropDown[i].style.display == '' || hiddenDropDown[i].style.display == 'none') {
   hiddenDropDown[i].style.display = 'block';
   dropDownLanguage[i].classList.add('drop-down_language_change_arrow');
  } else {
   hiddenDropDown[i].style.display = 'none';
   dropDownLanguage[i].classList.remove('drop-down_language_change_arrow');
  };
 }
};

// Icon copy code
var copyCodeIcons = document.querySelectorAll('.promocode_row i');
for(var i = 0; i<copyCodeIcons.length; i++) {
 if(copyCodeIcons[i].addEventListener) {
  copyCodeIcons[i].addEventListener('click', copyCode);
 } else {
  copyCodeIcons[i].attachEvent('onclick', copyCode);
 }
}
function copyCode(event) {
 event = event || window.event;
 console.log(event.target);
 if (event.target.tagName == 'I') {
   var copyText = event.target.parentNode.firstElementChild.textContent;
 }
 var textInput = document.createElement('input');
 document.body.append(textInput);
 textInput.value = copyText;
 textInput.select();
 document.execCommand("copy");
 textInput.remove();
 var successfulMessage = document.createElement('div');
 successfulMessage.innerHTML = '<p>Код скопирован в буфер обмена</p>';
 successfulMessage.classList.add('successful_copy_code');
 var successfullContainer = document.querySelector('.successful_messages_container');
 successfullContainer.append(successfulMessage);
 var successfulMessageOppacityAnimation = setInterval(closeSuccessfulMessage, 40);
 var opacityCount = 100;
 function closeSuccessfulMessage() {
  successfulMessage.style.opacity = opacityCount/100;
  opacityCount --;
  if (opacityCount<=10) {
   clearInterval(successfulMessageOppacityAnimation);
   successfulMessage.remove();
  };
 };
};

// Site Category Changer
var classic = document.getElementById('classic-game');
var cases = document.getElementById('case-game');
var double = document.getElementById('double-game');
var crash = document.getElementById('crash-game');
var craft = document.getElementById('craft-game');
if(classic.addEventListener) {
 classic.addEventListener('click', function() {
  categoryChanger('classic');
 });
} else {
 classic.attachEvent('onclick', function() {
  categoryChanger('classic');
 });
};
if(cases.addEventListener) {
 cases.addEventListener('click', function() {
  categoryChanger('case');
 });
} else {
 cases.attachEvent('onclick', function() {
  categoryChanger('case');
 });
};
if(double.addEventListener) {
 double.addEventListener('click', function() {
  categoryChanger('double');
 });
} else {
 double.attachEvent('onclick', function() {
  categoryChanger('double');
 });
};
if(crash.addEventListener) {
 crash.addEventListener('click', function() {
  categoryChanger('crash');
 });
} else {
 crash.attachEvent('onclick', function() {
  categoryChanger('crash');
 });
};
if(craft.addEventListener) {
 craft.addEventListener('click', function() {
  categoryChanger('craft');
 });
} else {
 craft.attachEvent('onclick', function() {
  categoryChanger('craft');
 });
};
function categoryChanger(categoryName) {
 var siteList = document.querySelectorAll('.site_box');
 for (var i = 0; i < siteList.length; i++) {
  siteList[i].style.display = 'none';
 };
 for (var i = 0; i < siteList.length; i++) {
  categoryAttribute = siteList[i].getAttribute('data-category');
  if (categoryAttribute.indexOf(categoryName) > -1) {
   siteList[i].style.display = 'block';
  };
 };
};

Из этого можно увидеть, что в Opera и Google Chrome не работают скрипты в которых событие подвешено на scroll, в чем может быть проблема?

P.S. в FireFox Все работает.

На всякий случай кусочек html кода к которому привязан скрипт с кнопкой "Наверх" (Первый из неработающих).

 <div class="up-scroll up-scroll_unviev">
  <i class="icon-arrow-up"></i>
 </div>

P.S.S И вообще все скрипты не работают в IE, в чем может быть проблема?

Сниппет по просьбе:

https://codepen.io/anon/pen/oqGgPy

Answer 1

Проблема заключается в использовании нестандартного свойства pageY у события.

Данное свойство документировано для MouseEvent и показывает смещение курсора мыши относительно страницы.

Для UIEvent, к которому относится и scroll данное свойство не стандартизировано, поэтому может быть не реализовано.

Вместо использования этого свойства нужно использовать window.scrollY для новых браузеров, либо window.pageYOffset если нужна поддержка ie

var scrollToTopButton = document.querySelector('.up-scroll');
window.addEventListener('scroll', topScrollButtonViev);
function topScrollButtonViev(event) {
  if (window.pageYOffset >= 300) {
    scrollToTopButton.classList.remove('up-scroll_unviev');
  } else {
    scrollToTopButton.classList.add('up-scroll_unviev');
  }
}
scrollToTopButton.addEventListener('click', topScroll);
function topScroll(e) {
  var topInterval = setInterval(topScrollUpSteps, 10);
function topScrollUpSteps() {
    if (window.pageYOffset >= 1) {
      window.scrollBy(0, -80);
    } else {
      clearInterval(topInterval);
    }
  }
}

body {
  background-color: red;
  height: 2000px;
}

.up-scroll {
  width: 70px;
  height: 70px;
  background-color: #fff;
  opacity: 0.8;
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: 0.3s;
  cursor: pointer;
}

.up-scroll:hover {
  opacity: 1;
}

.up-scroll:hover i {
  animation: ArrowUp 1.5s infinite ease-in-out;
}

.up-scroll i {
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%);
}

.up-scroll_unviev {
  opacity: 0;
}

<div class="up-scroll up-scroll_unviev">
  <i class="icon-arrow-up"></i>
</div>