如何实现React Slick滑块与页面滚动双向联动效果？

核心问题排查 #

你当前代码中滑块滚轮事件直接调用了event.preventDefault()阻止了页面默认滚动行为，因此操作滑块时页面不会跟随移动，同时缺少页面滚动的监听逻辑，无法实现滚动页面时同步滑动滑块，按以下步骤调整即可：

步骤1：调整滑块滚轮事件，实现操作滑块同步页面滚动 #

修改componentDidMount内的滚轮监听逻辑，增加页面同步滚动逻辑，滑块滑动到边界时不再阻止默认滚动，允许页面正常上下滑动：

// 提前把settings提到组件外层或者state里，方便全局调用
const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 1,
}

class ReviewSlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            reviews: [
                // 原有数据保持不变
            ]
        };
        // 绑定this指向
        this.handlePageScroll = this.handlePageScroll.bind(this)
    }

    componentDidMount() {
        const slickListDiv = document.getElementsByClassName('slick-list')[0]
        // 获取单张滑块卡片高度作为滚动单位偏移
        this.cardHeight = document.querySelector('.reviewCard').offsetHeight
        // 滑块最大可滑页码
        this.maxSlide = this.state.reviews.length - settings.slidesToShow

        slickListDiv.addEventListener('wheel', event => {
            const currentSlide = this.slider.state.currentSlide
            // 向下滚动
            if (event.deltaY > 0) {
                if (currentSlide < this.maxSlide) {
                    event.preventDefault()
                    this.slider.slickNext()
                    // 同步滚动页面
                    window.scrollBy({top: this.cardHeight, behavior: 'smooth'})
                }
            } 
            // 向上滚动
            else {
                if (currentSlide > 0) {
                    event.preventDefault()
                    this.slider.slickPrev()
                    window.scrollBy({top: -this.cardHeight, behavior: 'smooth'})
                }
            }
        })

        // 新增页面滚动监听，实现反向同步
        window.addEventListener('scroll', this.handlePageScroll)
    }

    componentWillUnmount() {
        // 组件卸载时移除监听，避免内存泄漏
        window.removeEventListener('scroll', this.handlePageScroll)
    }

步骤2：新增页面滚动监听方法，实现滚动页面同步滑块 #

在组件内新增handlePageScroll方法，根据页面滚动位置计算对应滑块页码，自动切换滑块：

handlePageScroll() {
    // 获取滑块区域距离页面顶部的距离
    const sliderTop = document.querySelector('.review').offsetTop
    // 计算页面滚动位置相对于滑块区域的偏移量
    const scrollOffset = window.scrollY - sliderTop
    // 仅当滚动位置在滑块区域范围内时同步滑块
    if (scrollOffset > 0 && scrollOffset < this.maxSlide * this.cardHeight) {
        const targetSlide = Math.round(scrollOffset / this.cardHeight)
        // 避免重复触发切换
        if (this.slider.state.currentSlide !== targetSlide) {
            this.slider.slickGoTo(targetSlide)
        }
    }
}

// 原有render方法保持不变即可

优化建议 #

• 给.reviewCard设置固定高度，避免滑块内容高度不一致导致滚动偏移计算出错
• 若需要实现全屏联动效果，可将this.cardHeight替换为window.innerHeight，同时给滑块卡片设置height: 100vh即可
• 可将页面滚动的动画时长和滑块的speed参数调整为一致，避免视觉上不同步

内容的提问来源于stack exchange，提问作者Nurmuhamed Nurlanov