Question

我希望使用wheel事件触发元素颜色的更改。颜色的变化是通过循环上课而发生的。类变化仅应发生在增量差大于50时大于50或小于-50。交互作用应该感觉像是一种滑动更改为另一种颜色，因此，类别更改应仅在最大差异出现在三角洲或“峰值”，反之则是“波谷”和底部。我在下面概述了一个峰值。

delta: 1
delta: 6
delta: 21
delta: 42
delta: 48
delta: 67
delta: 77
delta: 79    <————— HERE
delta: 77
delta: 75
delta: 72
delta: 70
delta: 66
delta: 64
delta: 59
delta: 55
delta: 51
delta: 47
delta: 45
delta: 41
delta: 37
delta: 35
delta: 32
delta: 29
delta: 26
delta: 24
delta: 22
delta: 20
delta: 19
delta: 17
delta: 16
delta: 14
delta: 13
delta: 12
delta: 11
delta: 10
delta: 9
delta: 8
delta: 7
delta: 6
delta: 5
delta: 4
delta: 3
delta: 2
delta: 1

当前它的工作方式是：

delta: 1
delta: 6
delta: 21
delta: 42
delta: 48
delta: 67    <————— HERE
delta: 77    <————— HERE
delta: 79    <————— HERE
delta: 77    <————— HERE
delta: 75    <————— HERE...
delta: 72
delta: 70
delta: 66
delta: 64
delta: 59
delta: 55
delta: 51
delta: 47
delta: 45
delta: 41
delta: 37
delta: 35
delta: 32
delta: 29
delta: 26
delta: 24
delta: 22
delta: 20
delta: 19
delta: 17
delta: 16
delta: 14
delta: 13
delta: 12
delta: 11
delta: 10
delta: 9
delta: 8
delta: 7
delta: 6
delta: 5
delta: 4
delta: 3
delta: 2
delta: 1

我该如何实现？任何帮助将不胜感激。

const container = document.querySelector('main')
const classes = ['white', 'black', 'purple', 'blue', 'orange']

let index = 0
let lastDelta
let topDelta

function changeColour(event) {
    event.preventDefault()
    console.log(`delta: ${event.deltaY}`)
    // console.log(`index: ${index}`)
    if (event.deltaY > 50) {
        if (index === index.length - 1) {
            index = 0
        } else {
            index++
        }
        container.classList = classes[index]
    } else if (event.deltaY < -50) {
        if (index === 0) {
            index = index.length - 1
        } else {
            index++
        }
        container.classList = classes[index]
    } else {
        event.deltaY = 0
    }

}

container.addEventListener('wheel', changeColour)

main {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

.white {
  background-color: white;
}
.black {
  background-color: black;
}
.purple {
  background-color: purple;
}
.blue {
  background-color: blue;
}
.orange {
  background-color: orange;
}

<main>

</main>

使用wheel事件更改类

0 个答案: