Как сделать скролл блока колесиком мыши более плавным javascript?

function readyScript() {
  window.addEventListener('scroll', elTravel);

  let srcProcent;

  function elTravel() {
let sectorsSlide = document.querySelectorAll('.sectors__slide');

for (let index = 0; index < sectorsSlide.length; index++) {
  const sectorSlide = sectorsSlide[index];
  const sectorSlideTop = sectorSlide.getBoundingClientRect().top * 3;
  const sectorSlideHeight = sectorSlide.offsetHeight;
  if (sectorSlide.classList.contains('main-block')) {
    let blockTypes = document.querySelector('.main-block__center');
    let mainBlockLogo = document.querySelector('.main-block__logo');
    let mainBlockSubLogo = document.querySelector('.main-block__sublogo');
    let mainBlockText = document.querySelector('.main-block__text');
    let mainBlock = document.querySelector('.main-block');
    let circleContent = document.querySelector('.main-block-two__content');
    srcProcent = (scrollY - sectorSlideTop) / sectorSlideHeight * 100;
    if (scrollY > sectorSlideTop && scrollY < sectorSlideTop + sectorSlideHeight) {
      let blockTypesSlide = scrollY - sectorSlideTop;
      blockTypes.classList.add('_fixed');
      blockTypes.style.cssText = `transform: translate(0px,${blockTypesSlide}px);`;
      elTravelTypes();
    } else if (scrollY <= sectorSlideTop) {
      blockTypes.style.cssText = `transform: translate(0px,0px);`;
      blockTypes.classList.remove('_fixed');
      mainBlockLogo.style.cssText = `transform: translate(0px,0px);`;
      mainBlockSubLogo.style.cssText = `transform: translate(0px,0px);`;
      mainBlockText.style.cssText = `transform: translate(0px,0px);`;
      mainBlock.style.cssText = `opacity: 1; min-height: 100vh; `;
      circleContent.style.cssText = `opacity: 0;`;
    } else if (scrollY >= sectorSlideTop + sectorSlideHeight) {
      blockTypes.style.cssText = `transform: translate(0px,${sectorSlideHeight}px);`;
      blockTypes.classList.remove('_fixed');
      mainBlock.style.cssText = `opacity: 0; min-height: 0vh;`;
      circleContent.style.cssText = `opacity: 1;`;
    }
  }
}
  }

  function elTravelTypes() {
let mainBlockLogo = document.querySelector('.main-block__logo');
let mainBlockSubLogo = document.querySelector('.main-block__sublogo');
let mainBlockText = document.querySelector('.main-block__text');
let mainBlockTranslate = -800 / 100 * srcProcent;
mainBlockLogo.style.cssText = `transform: translate(0px,${mainBlockTranslate}px);`;
mainBlockSubLogo.style.cssText = `transform: translate(0px,${mainBlockTranslate}px);`;
mainBlockText.style.cssText = `transform: translate(0px,${mainBlockTranslate}px);`;
  }

  function onResize() {
elTravel();
  }
  window.addEventListener('resize', onResize);

  elTravel();

};

document.addEventListener('DOMContentLoaded', readyScript);

.page__sectors {
  background: #161616;
}

.main-block {
  min-height: 100vh;
  transition: all 0.3s ease 0s;

}

.main-block-two {
  min-height: 590px;
  transition: all 0.3s ease 0s;
}

.main-block-two__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-align: center;
}

.main-block__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.8s ease 0s;
  height: 100vh;
}

.main-block__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0px 0px 20px;
  position: relative;
  transition: all 0.3s ease 0s;
}

.main-block__logo {
  font-size: 120px;
  color: #ffffff;
}

.main-block__sublogo {
  font-size: 32px;
  color: #ffffff;
}

.main-block__text {
  font-size: 24px;
  color: #ffffff;
}

<div class="page__sectors">
  <div class="sectors__slide main-block">
<div class="container">
  <div class="main-block__content">
    <div class="main-block__center">
      <div class="main-block__logo">
        LOGO
      </div>
      <div class="main-block__sublogo">SUBLOGOSUBLOGO SUBLOGO SUBLOGO</div>
      <div class="main-block__text">TEXT TEXT TEXT TEXT</div>
    </div>
  </div>
</div>
  </div>
  <div class="sectors__slide main-block-two">
<div class="main-block-two__content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt temporibus laboriosam, iure vero minus neque eius voluptatum corrupti saepe nisi quis hic debitis? Commodi magni distinctio cupiditate magnam explicabo quae?
</div>
  </div>
</div>