How do I get rid of lag while using transform on scroll event?-CodePudding

So I'm trying to add a smooth scrolling effect for a site that I'm working on. Here is the link to the fiddle of the problem I'm trying to solve.

What I'm doing here is watching the scroll event and translating the #smooth-content div by the amount scrolled. I get the intended effect but there's a lag from the time I scroll to the time the div is translated.

CodePudding user response：

The lag is caused by the timing function of the transition. You're using a cubic-bezier for that.

you could try a bezier with a steeper start: IE: cubic-bezier(0,.79,.65,.99)

A helpful tool can be used find a bezier that fits your needs. In general the steeper the graph, the faster your animation will be. You can even 'overshoot' and have it bounce back.

let yOffset = 0;

const handleScroll = () => {
  scrollSmoothly();

  yOffset = window.pageYOffset;
}

const scrollSmoothly = () => {
  var scrollAmount = yOffset * -1;

  $("#smooth-content").css({
    transform: `translate3d(0, ${scrollAmount}px, 0)`
  });
}

$(document).on('touchmove', handleScroll);
$(document).on('scroll', handleScroll);

body {
  height: 4000px;
}

#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#smooth-content {
  position: relative;
  overflow: visible;
  width: 100%;
  will-change: transform;
  transition: 1.2s cubic-bezier(0, .79, .65, .99);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="smooth-wrapper">
  <div id="smooth-content">
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
    <p>
      <!-- It is a Paragraph tag for creating the paragraph -->
      <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
      a flexible way for designing the web pages along with the text.
    </p>
    HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
    </p>
  </div>
</div>