swiper的wheel事件在mac上导致元素overflow:scroll属性失效

问题描述：

使用swiper的竖直翻页功能的时候，开启了鼠标滚轮滚动翻页的功能，在windows系统的浏览器上运行良好，但是在mac的浏览器上，slide里面元素的overflow: auto, scroll属性都完全失效。就是当有页面长度溢出的时候会直接隐藏掉不显示。通过排查发现，当swiper实例开启mousewheel={true}时候，直接导致元素的滚动属性失效，也就是说翻页的滚动和元素内部的滚动冲突了。

解决方案：

先设置mousewheel={false}, 这样页面中的元素能正常滚动了。但是此时失去了鼠标滚轮滚动翻页的功能，但是没关系，这个我们手动添加下鼠标的滚轮事件，但是手动触发翻页就能实现了。我使用的是react hooks + swiper - ^9.1.1 ， 以下是代码实现：

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y, Mousewheel } from 'swiper';
import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import styles from './index.module.scss';
import Header from "./components/header";
import Scene1 from './components/scene1';
import Scene2 from './components/scene2';
import Scene3 from './components/scene3';
import Scene4 from './components/scene4';
import Scene5 from './components/scene5';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/mousewheel';
import React,  { useState , useEffect} from 'react';
import  { debounce, throttle } from 'lodash'
 

const Home2 = () => {
    const [swiper, setSwiper] = useState(null)
    const [theme, setTheme] = useState('dark')

    useEffect(()=>{
        const myswiper = document.getElementById('myswiper');
        
        // 获取到swiper实例的时候，手动监听鼠标滚动事件
        if (swiper) {
            myswiper.addEventListener('wheel',  handleScroll)
        }

        return ()=> {
            myswiper.removeEventListener('wheel', handleScroll)
        }
    }, swiper)


    // 使用防抖函数，一段时间内只执行一次，防止一次滚动翻页多次
    const handleScroll = debounce((event)=>{
        // console.log('scroll', event);
        if (event.wheelDelta > 0) {
            // 向上滑动，上一页
            swiper.slidePrev()
        } else {
            // 向下滑动，下一页
            swiper.slideNext()
        }
    }, 300) 


    return (
        <div style={{
            height: '100%',
            position: 'relative'
        }}>
            <div className={styles.header}>
                <Header theme={theme}></Header>
            </div>
            <Swiper
            id='myswiper'
            style={{
                height: '100%',
                // paddingTop: 70,
                boxSizing: 'content-box'
            }}
            effect="slide"
            direction="vertical"
            modules={[Navigation, Pagination, Scrollbar, A11y, Mousewheel]}
            spaceBetween={70}
            slidesPerView={1}
            threshold={500}
            // 左右箭头导航
            // navigation
            // 分页功能
            // pagination={{ clickable: true }}
            // 可拖拽翻页
            // scrollbar={{ draggable: true }}
            // 是否开启鼠标滚动条翻页
            // mousewheel={true}
            // 获取swiper实例
            onSwiper={(swiper) => {
                setSwiper(swiper)
                // console.log(swiper)
            }}
            // 是否开启循环翻页
            // loop={true}
            // 翻页触发的事件
            onSlideChange={(swiper) => {
                // console.log('slide change', swiper.activeIndex)
                if (swiper.activeIndex % 2 == 0) {
                    setTheme('dark')
                } else {
                    setTheme('light')
                }
            }}
            >
                <SwiperSlide> <Scene1/>  </SwiperSlide>
                <SwiperSlide> <Scene2/> </SwiperSlide>
                <SwiperSlide > <Scene3/> </SwiperSlide>
                <SwiperSlide> <Scene4/> </SwiperSlide>
                <SwiperSlide> <Scene5/> </SwiperSlide>
            </Swiper>
        </div>
    )

}

export default Home2