Блог

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

Как заставить закрепленные разделы с плавной прокруткой в Chrome вести себя как firefox

#javascript #html #css #scroll #smooth-scrolling

#javascript #HTML #css #прокрутка #плавная прокрутка

Вопрос:

У меня есть связанный codepen, который показывает плавную прокрутку и закрепляет каждый раздел в firefox. Однако после открытия в Chrome он задерживается. Веб-сайт отлично работает в Firefox из-за функции плавной прокрутки Firefox, но в Chrome это мусор. Есть ли какие-либо библиотеки, которые можно было бы порекомендовать?

Я пробовал Locomotive.js

Codepen: https://codepen.io/lenniefinch/pen/BaLNqdr

 //Locomotive Scroll

(function() {
  var scroll = new LocomotiveScroll({
    el: document.querySelector("html"),
    smooth: true,
    smoothMobile: true,
    // direction:"horizontal",
    // inertia:1,
    // repeat:true,
    offset: ["10%", 100]
  });
})();


//Scroll trigger

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  toggleActions: "restart pause resume pause"
});

gsap.to(".first", {
  scrollTrigger: ".first",
  pin: ".first",
  scrub: 0.5,
  start: "top top",
  end: "bottom 100px"
});

gsap.to(".second", {
  scrollTrigger: {
    trigger: ".second",
    toggleActions: "restart pause reverse pause"
    start: "top top"
    end: "bottom 100px"
  },
  duration: 1,
  backgroundColor: "#FFA500",
  ease: "none"
});

gsap.to(".third", {
  scrollTrigger: ".third",
  scale: 2,
  repeat: -1
}); 
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*! locomotive-scroll v3.3.11 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */

html.has-scroll-smooth {
  overflow: hidden;
}

html {
  font-family: sans-serif;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  min-height: 100vh;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
  scroll-snap-type: y mandatory;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
  scroll-snap-type: y mandatory;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100vh;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.c-scrollbar:hover {
  transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


/* END */


/* body {
  overflow-x: hidden !important;
  height: 100vh;
} */

.first,
.second,
.thrid {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  scroll-snap-align: start;
}

.first {
  background-color: rgba(35, 116, 171, 0.7);
}

.second {
  background-color: rgba(255, 132, 132, 0.7);
}

.thrid {
  background-color: rgba(188, 217, 121, 0.7);
} 
 <section class="first" data-scroll-section>
  <h1 data-scroll data-scroll-speed="8">Section One</h1>
  <p data-scroll data-scroll-speed="4">👋</p>
</section>
<section class="second" data-scroll-section>
  <h2 data-scroll data-scroll-sticky data-scroll-speed="10">Section Two</h2>
  <p data-scroll data-scroll-speed="5">😬</p>
</section>
<section class="thrid" data-scroll-section>
  <h1 data-scroll data-scroll-speed="8">Section Three</h1>
  <p>👋</p>
</section>

<script></script>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js'></script>

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.3.11/dist/locomotive-scroll.min.js'></script>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js'></script>

<script type='text/javascript' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>

<script type='text/javascript' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>