根据我的经验，传送带通常只依赖于transform属性，并不真正使用滚动偏移量[1][2][3]。 他们使用“触摸事件”，有时还使用“拖放API”来跨所有设备和平台工作。

然而，出于好奇心，我修改了您的代码片段，以使用滚动对开和滚动偏移。 请注意，Element.ScrollTo()方法并不与每个浏览器兼容，可能需要一个polyfill。

接下来，OnScroll函数依赖于使用ScrollLeft属性进行的模数计算。 正如这里提到的，这可能会在使用显示缩放的系统上导致一些错误。

注意:您可以通过按shift键水平滚动来试用代码段。

null

const container = document.querySelector('.usp-container')
const buttons = document.querySelectorAll('input[name="usp-slide"]')

const onScroll = function(event) {
  if (container.scrollLeft % container.offsetWidth === 0) {
    const page = 1 + (container.scrollLeft / container.offsetWidth);
    const radio = document.getElementById(`usp-${page}-button`)
    radio.click()
  }
}

const onClick = function(event) {
  const button = event.target
  const targetPage = button.dataset.target

  container.scrollTo({
    left: targetPage * container.offsetWidth,
    behavior: 'smooth'
  })
}

container.addEventListener('scroll', onScroll, {
  passive: true
})

for (const button of buttons) {
  button.addEventListener('click', onClick)
}

.usp-radio {
  display: none!important;
}

.usp-container {
  display: flex;
  justify-content: normal;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.usp-container::-webkit-scrollbar {
  display: none;
}

.usp-item {
  display: flex;
  flex: 0 0 auto;
  max-width: none!important;
  width: 100%;
  scroll-snap-align: start;
  transition: transform 0.3s ease-in-out;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.usp-title,
.usp-text {
  max-width: 260px;
  display: block;
  margin: 10px auto;
  padding-bottom: 15px;
  text-align: center;
}

.content-container.usp-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.usp-radio+label {
  background-color: #C5C5C5;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  order: 2;
  margin: 0px 2.5px;
}

.usp-radio:checked+label {
  background-color: #707070;
}

<div class="content-container usp-flex">
  <input type="radio" id="usp-1-button" class="usp-radio" name="usp-slide" checked data-target="0" />
  <label for="usp-1-button"></label>

  <input type="radio" id="usp-2-button" class="usp-radio" name="usp-slide" data-target="1" />
  <label for="usp-2-button"></label>

  <input type="radio" id="usp-3-button" class="usp-radio" name="usp-slide" data-target="2" />
  <label id="usp-3-label" for="usp-3-button"></label>

  <input type="radio" id="usp-4-button" class="usp-radio" name="usp-slide" data-target="3" />
  <label id="usp-4-label" for="usp-4-button"></label>

  <div class="usp-container" style="order: 1;">
    <div id="usp-1" class="usp-item">
      <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-door.jpg" width="52" height="52" />
      <span class="usp-title">Uniek kijkje achter de schermen</span>
      <span class="usp-text">Doe mee aan een panelsessie en krijg direct een kijkje achter de schermen.</span>
    </div>
    <div id="usp-2" class="usp-item">
      <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-feedback.jpg" width="52" height="52" />
      <span class="usp-title">Vertel ons over jouw ideale website</span>
      <span class="usp-text">Geef aan wat voor u belangrijk is en misschien ziet u uw ideeën later terug!</span>
    </div>
    <div id="usp-3" class="usp-item">
      <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-reiskosten.jpg" width="52" height="52" />
      <span class="usp-title">Reiskosten worden vergoed</span>
      <span class="usp-text">Komt u bij ons langs op kantoor? Dan vergoeden wij uw reiskosten.</span>
    </div>
    <div id="usp-4" class="usp-item">
      <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-hotel.jpg" width="52" height="52" />
      <span class="usp-title">Maak kans op een GRATIS verblijf</span>
      <span class="usp-text">Neemt u deel aan ons gebruikerspanel? Dan maakt u kans op een gratis uitje!</span>
    </div>
  </div>