时间戳

首页 > 解决方案 > 如何修复 Chrome 中的页面滚动延迟

jquery - 如何修复 Chrome 中的页面滚动延迟

问题描述

我一直在开发一个新的静态网站，这是一个非常简单的构建，但有一些微妙的 CSS 动画，由isInViewportjs 函数触发。

我注意到 Chrome 在滚动页面时会出现少量延迟，这非常不和谐。然而在 Safari 中，Firefox 绝对没问题。

这是js当元素在视口中时触发的。

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height() - 100;

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  setTimeout(function(){
    $('section').each(function() {
      if ($(this).isInViewport()) {
        $(this).addClass('reveal');
      }
      else {
      }
    });
   }, 300);
});

有什么不正常的我不应该做的吗？

这是与CSS动画相关的。

.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal-cover {
    background: #fcfcfc;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    transform: translateX(0);
    -webkit-transform: translateX(0);

    transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;
    -webkit-transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;
}

.image-reveal img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(1.4);
  -webkit-transform: scale(1.4);

  transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;
  -webkit-transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;
}

section.reveal .image-reveal-cover {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

section.reveal .image-reveal img {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
}

这是一个代码笔，显示了 Chrome 中滚动抖动的示例。

我是否错误地触发了我的动画？我认为使用变换作为 CSS 运动的基础相对没有延迟？

任何建议表示赞赏。谢谢你。

我也在Chrome 71.0.3578.98使用Mac OS Mojave

标签： jquerycssgoogle-chrome

解决方案

对于这个例子，我有太多的担忧；

  • 摆脱 Jquery 它很慢，你可以用 JS 做任何事情（http://youmightnotneedjquery.com/）
  • 为什么超时？你不需要它。如果您要使用它，请终止其他超时，以免重复。
  • 使用 ES6（易于理解、阅读和编码）您也可以编译到较低版本。它让你在你的职业道路上保持更新。
  • 不要为每个滚动运行选择器。在触发滚动之前使用选择器。

这里的例子：

class ScrollControl {
  constructor() {
    this.sectionDOMList = document.querySelectorAll('section');
    this.initListeners();
  }

  initListeners() {
    window.addEventListener('scroll', (e) => {
      this.animateSections();
    });
  }

  animateSections() {
    for (let i = 0; i < this.sectionDOMList.length; i++) {
      if (this.isInViewport(this.sectionDOMList[i])) {
      	if(!this.sectionDOMList[i].isReveal){
          this.sectionDOMList[i].isReveal = true;
          this.sectionDOMList[i].classList.add('reveal');
        }
      }
    }
  }

  isInViewport(element) {
    const elementCenter = (element.getBoundingClientRect().top + element.getBoundingClientRect().bottom)/2;
    const viewportTop = window.scrollY;
    const viewportBottom = viewportTop + window.innerHeight;
    return elementCenter < viewportBottom;
  }
}

(function() {
  new ScrollControl();
})();
/* Reset */

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Base */

body {
  width: 100%;
  height: 100%;
  background: white;
  color: #3b3b3b;
  font-family: 'Larsseit', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 1640px;
  margin-left: 30px;
  margin-right: 30px;
}

@media (min-width: 768px) {
  .container {
    margin-left: 80px;
    margin-right: 80px;
  }
}

@media (min-width: 1800px) {
  .container {
    margin: 0 auto;
  }
}

.vc {
  display: table;
  height: 100%;
}

.vc-ele {
  display: table-cell;
  vertical-align: middle;
}

section {
  padding: 400px 0;
}

section.full-vh {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-half {
  width: 100%;
}

@media (min-width: 992px) {
  .col-half {
    width: 50%;
  }
}

.row.align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Typography */

h1 {
  font-size: 52px;
}

h2 {
  font-size: 26px;
}

p {
  font-family: 'Larsseit', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #3b3b3b;
}

/* Image reveal */

.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal-cover {
  background: #fcfcfc;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;
  -webkit-transition: transform cubic-bezier(.19, 1, .22, 1) 1.75s;
}

.image-reveal img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;
  -webkit-transition: all cubic-bezier(.19, 1, .22, 1) 1.5s;
}

section.reveal .image-reveal-cover {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

section.reveal .image-reveal img {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
}
<div id="page">
  <div class="container">

    <section class="full-vh">
      <div class="vc">
        <div class="vc-ele">
          <h1>Scroll down</h1>
        </div>
      </div>
    </section>

    <section>
      <div class="row align-center">

        <div class="col-half">
          <div class="image-reveal">
            <div class="image-reveal-cover"></div>
            <img src="https://fearthewild.com/clients/playground/horse.jpg" alt="Horse" />
          </div>
        </div>

        <div class="col-half">
          <h2>This is my horse.</h2>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
          <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        </div>

      </div>
    </section>

  </div>
</div>

推荐阅读