50projects50days知识点-26-double-vertical-slider

示例网址：

https://50projects50days.com/projects/double-vertical-slider/
http://50projects.tc.cluski.top/50projects50days/double-vertical-slider/

效果：

思路：

排版上限制左边的宽度为35%，右边为65%。使用绝对定位让左右两个容器拖标，右边的元素需要使用right: 35%来右移一段距离。同时，使用overflow: hidden来将溢出主容器的给隐藏掉。

因为是多出画面的是隐藏掉的，所以在按动上下按钮之后，给左右容器分别一个transform属性，即可进行画面的切换了。

const sliderContainer = document.querySelector('.slider-container')
const rightSliceEl = document.querySelector('.right-slide');
const leftSliceEl = document.querySelector('.left-slide');
const upBtn = document.querySelector('.up-button');
const downBtn = document.querySelector('.down-button');
const sliceLength = rightSliceEl.children.length

leftSliceEl.style.top = `-${(sliceLength - 1) * 100}vh`

let num = 0

upBtn.addEventListener('click', () => {
    const sliderHeight = sliderContainer.clientHeight
    num++
    if (num >= 4) {
        num = 0
    }
    leftSliceEl.style.transform = `translateY(${num * sliderHeight}px)`
    rightSliceEl.style.transform = `translateY(-${num * sliderHeight}px)`
})

downBtn.addEventListener('click', () => {
    const sliderHeight = sliderContainer.clientHeight
    num--
    if (num < 0) {
        num = 3
    }
    leftSliceEl.style.transform = `translateY(${num * sliderHeight}px)`
    rightSliceEl.style.transform = `translateY(-${num * sliderHeight}px)`
})

❗ 这里使用了sliderContainer.clientHeight来获取可视区域的高度。