swiper的wheel事件在mac上导致元素overflow:scroll属性失效
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y, Mousewheel } from 'swiper';
import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import styles from './';
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)=>{
// ('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)
// (swiper)
}}
// 是否开启循环翻页
// loop={true}
// 翻页触发的事件
onSlideChange={(swiper) => {
// ('slide change', )
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