javascript - 当轮播到达末尾时停止滚动

Question

我设置了一个滚动轮播，当您使用鼠标滚轮滚动时，轮播会向左/向右滚动。

当您向下滚动时，轮播向右移动，当偏移量为零时，它会停止滚动。当您向上滚动时，轮播到达轮播的末尾，它会弹回到开头。我怎样才能使它在到达终点时停止？我知道我的第二个三元运算符的数学是错误的，但我不确定它的数学是什么。

https://jsfiddle.net/obo4LkLL/

// Stop the scroll from going backwards too far
this.offset = this.offset > 0 ? 0 : this.offset

// Stop the scroll from going forwards too far
this.offset = Math.abs(this.offset) + this.element.clientWidth > this.element.scrollWidth ?
  Math.abs(this.offset) + this.element.clientWidth : this.offset

// Set the offset foreach child in the carousel
this.items.forEach(item => {
  if (!item.style) return
  item.style.transform = `translateX(${this.offset}px)`
})

Answer 1

所以，基本逻辑是 - 我们需要变量 limit，它等于:轮播中子 div 的总宽度 - 轮播/容器宽度。要使所有内容动态化，您可以执行以下操作:

class carousel {

  constructor(element) {
  this.total_width=0;


    this.element = element  


    this.items = []
    this.offset = 0
    this.scrollSpeed = 20
    this.element.childNodes.forEach(node => this.items.push(node))
    this.element.childNodes.forEach(node => {if(node.nodeType===1) return this.total_width+=node.clientWidth})
    element.addEventListener('wheel', this.wheel.bind(this))

  }

  wheel(e) {
    // Scroll up
    if (e.deltaY < 0) {
      this.offset -= this.scrollSpeed
    }
    // Scroll down
    else {
      this.offset += this.scrollSpeed
    }
    // Stop the scroll from going backwards too far
   // console.log(this.offset);
    this.offset = this.offset > 0 ? 0 : this.offset

    //stop scroll
    this.limit=this.total_width-this.element.clientWidth;





    if(Math.abs(this.offset)>this.limit) {
    this.offset=-this.limit;
    }

    // Stop the scroll from going forwards too far
   /* this.offset = Math.abs(this.offset) + this.element.clientWidth > this.element.scrollWidth ?
      Math.abs(this.offset) + this.element.clientWidth : this.offset*/
    // Set the offset foreach child in the carousel
    this.items.forEach(item => {

      if (!item.style) return
      item.style.transform = `translateX(${this.offset}px)`
    })
  }
}

document.querySelectorAll('.carousel').forEach(e => new carousel(e))

我刚刚添加了一些变量(total_width、limit)和停止滚动的条件。

演示:

class carousel {

  constructor(element) {
  this.total_width=0;
 
  
    this.element = element  
  
   
    this.items = []
    this.offset = 0
    this.scrollSpeed = 20
    this.element.childNodes.forEach(node => this.items.push(node))
    this.element.childNodes.forEach(node => {if(node.nodeType===1) return this.total_width+=node.clientWidth})
    element.addEventListener('wheel', this.wheel.bind(this))

  }

  wheel(e) {
    // Scroll up
    if (e.deltaY < 0) {
      this.offset -= this.scrollSpeed
    }
    // Scroll down
    else {
      this.offset += this.scrollSpeed
    }
    // Stop the scroll from going backwards too far
   // console.log(this.offset);
    this.offset = this.offset > 0 ? 0 : this.offset
    
    //stop scroll
    this.limit=this.total_width-this.element.clientWidth;
    
   // console.log(this.limit);
   
  
   
    if(Math.abs(this.offset)>this.limit) {
    this.offset=-this.limit;
    }
    
    // Stop the scroll from going forwards too far
   /* this.offset = Math.abs(this.offset) + this.element.clientWidth > this.element.scrollWidth ?
      Math.abs(this.offset) + this.element.clientWidth : this.offset*/
    // Set the offset foreach child in the carousel
    this.items.forEach(item => {
   
      if (!item.style) return
      item.style.transform = `translateX(${this.offset}px)`
    })
  }
}

document.querySelectorAll('.carousel').forEach(e => new carousel(e))

.carousel {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
  border:3px solid green;
}

.carousel>div {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right:-4px;
}

.carousel>div:nth-child(even) {
  background: red;
}

.carousel>div:nth-child(odd) {
  background: blue;
}

<div class="carousel">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>