Блог

Главная - Вопросы по программированию - Код работает нормально везде, кроме IE, не могу понять, почему

Код работает нормально везде, кроме IE, не могу понять, почему

#javascript

#javascript

Вопрос:

У меня есть простой скрипт, который перемещает определенные блоки при прокрутке. Кажется, он отлично работает во всех браузерах, кроме IE, и я не могу понять, почему. Я скомпилировал код с использованием babel в ECMA5, надеясь, что это поможет, но это не поможет.

Это JS

 function slideIn(e) {
    sliderImages.forEach(function (sliderImage) {
        var slideInAt = window.scrollY   window.innerHeight;
        var imageBottom = sliderImage.offsetTop   sliderImage.offsetHeight;
        var isHalfShown = slideInAt > sliderImage.offsetTop;
        var isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown amp;amp; isNotScrolledPast) {
            sliderImage.classList.add('visible');
        } else {
            sliderImage.classList.remove('visible');
        }
    });
}

Если у кого-нибудь когда-либо была подобная проблема и он знает, с чем это может быть связано, это было бы очень ценно!

Комментарии:

1. Вместо этого используйте IntersectionObserver в качестве прогрессивного улучшения. (Некоторые могут возразить, что перемещение объектов при прокрутке не является улучшением, но применяется тот же принцип.)

2. Я ценю комментарий, но в предоставленной вами ссылке говорится, что ни один из них не поддерживается в IE.

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

4. Список классов не поддерживается InternetExplorer.

5. «Не работает» — это не ошибка. Какую ошибку вы получаете?

Ответ №1:

Вопрос в том, почему слайды не скользят и не скользят в IE, но в некоторых других браузерах все в порядке.

Приведенный код использует classList, и он недоступен (или, по крайней мере, не полностью) в IE, как прокомментировал @Carlos1232. Это, вероятно, единственная проблема IE, связанная с данным кодом.

Вы можете заменить эти строки:

 sliderImage.classList.add('visible');

sliderImage.classList.remove('visible');

с

 add(sliderImage,'visible');

remove(sliderImage,'visible');

если вы добавите две функции ниже. Они проверяют, реализован ли classList в браузере, и если это не так, они вместо этого получают className (что нормально для IE> = 9) и анализируют строку, которую он содержит, чтобы добавить / удалить требуемый класс.

 function add(element,cl) {
  if (element.classList) {
    element.classList.add(cl);
  }
  else {
    if (element.className.split(" ").indexOf(cl) == -1) {
      element.className  = " "   cl;
    }
  }
}

function remove(element,cl) {
  if (element.classList) {
    element.classList.remove(cl);
  }
  else {
    element.className = element.className.replace(/bclb/g, "");
  }
}