记录：js监听滚轮事件实现横向滚动

html

<div class="ranking-list">
      <div class="ranking-item">
        <img src="./images/No.1.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.2.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.3.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.4.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.5.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.6.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.7.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.8.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.9.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
      <div class="ranking-item">
        <img src="./images/No.10.png" alt="">
        <p class="company-name">辽宁公司</p>
        <p class="ranking-date">2023.06.15</p>
      </div>
    </div>

css

.ranking-container{
  overflow: hidden;
}
.ranking-list{
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  width: 100%;
  margin-top: 20px;
  cursor: move;
  transition: transform 0.2s;
}
.ranking-item{
  padding-right: 15px;
  font-size: 12px;
  color: #DAF3FC;
}

.ranking-item img{
  display: block;
}

.ranking-item .company-name{
  width: 62px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 5px;
}
.ranking-item .ranking-date{
  color: #DAF3FC;
  opacity: 0.7;
}

js

const doms = {
  rankingListEl: document.querySelector('.ranking-list')
}
// 当前偏移量
var translateX = 0,
  maxLeftX = doms.rankingListEl.clientWidth - doms.rankingListEl.scrollWidth;

doms.rankingListEl.addEventListener('wheel', function (e) {
    if (doms.rankingListEl.offsetWidth < doms.rankingListEl.scrollWidth) {
//判断滚轮方向，-1:向下，1:向上
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))
        
        //每次滚动距离在原偏移量上 加/减 40
      let scrollLeft = translateX + delta * 40
      if (delta == -1) {
        //当前偏移量超过最大可偏移量，则设置为最大偏移量，否则设置为计算的偏移量
        if (scrollLeft < maxLeftX) {
          doms.rankingListEl.style.transform = `translateX(${maxLeftX}px)`
          translateX = maxLeftX
        } else {
          doms.rankingListEl.style.transform = `translateX(${scrollLeft}px)`
          translateX = scrollLeft
        }
      } else {
        // 当计算的偏移量小于0时，设置为计算的偏移量，大于0时设置为0
        if (scrollLeft < 0) {
          doms.rankingListEl.style.transform = `translateX(${scrollLeft}px)`
          translateX = scrollLeft
        } else {
          doms.rankingListEl.style.transform = `translateX(${0}px)`
          translateX = 0
        }
      }
      e.preventDefault();
    }
  })