Блог

Главная - Вопросы по программированию - Как оптимизировать jQuery и CSS — переходы с дрожащей прокруткой

Как оптимизировать jQuery и CSS — переходы с дрожащей прокруткой

#jquery #performance

#jquery #Производительность

Вопрос:

Я не нашел здесь ответа, который исправил бы мое решение —

Недавно я внедрил на своем личном сайте набор функций addClass amp; removeClass jQuery, которые запускаются, когда элемент появляется в поле зрения. У меня установлен CSS размером в пиксель, который выводит его за пределы экрана, и когда элемент прокручивается, к элементу добавляется класс, который возвращает его на экран.

Я не получаю никаких ошибок JS в консоли, и все мои изображения сжаты. Не уверен, что может быть причиной этого, но это выглядит довольно грубо. Любые советы были бы потрясающими.

Вот ссылка на сайт

Пример функции jQuery

   $(window).scroll(function() {
    var sT = $(this).scrollTop();
    var sB = sT   $(window).height();
    var tag = $(".outer-box-l-1");

    if ($(tag).position().top < sB) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  });

CSS

 .outer-box-l-1 {
  display: inline-block;
  margin: 0px 8px 40px 8px;
  width: 35%;
  max-width: 1200px;
  list-style: none;
  text-align: center;
  z-index: unset;
  opacity: 0;
  transform: translate(-850px, 0);
  transition: all 0.5s;
}

.outer-box-l-1.visible {
  transform: translate(0, 0);
  opacity: 1;
}

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

1. На iPad совсем не дрожит. Какой браузер вы используете?

2. Я проверил это в Chrome. По какой-то причине это действительно выглядит прилично в Safari, но некоторые анимации и стили потеряны, ха-ха. Головная боль центральная.

3. хм, не уверен. Кстати, отличный сайт.

4. @Cybernetic Спасибо! Работаем над этим!