鼠标纵向滑动的横向滚动页面

前沿

大家应该肯定见过某些官网的页面，我们的鼠标滚动时，页面却是左右滑动，真是神奇啊！这里博主想利用css3实现下这个效果。

使用技术栈

• react-hook
• scss
• antd

直接上代码吧

这里我封装了一个x-scroll组件，代码不多
index.tsx

import React, { useEffect, useRef, useState, useCallback } from 'react';
import debounce from 'lodash/debounce';
import './index.scss';function XScroll(props: { children: any, fresh?: boolean }) {const { children, fresh = true } = props;const [size, setSize] = useState({width: 0,height: 0,})const ref = useRef<HTMLDivElement>(null);const  handleResize = useCallback(debounce(() => {if (!ref.current) return;setSize({width: ref.current.offsetWidth,height: ref.current.offsetHeight})}, 1000), [])useEffect(() => {// 监听窗口变化，然后防抖更新尺寸window.addEventListener('resize', () => {handleResize();})// 默认开始 第一次进来强制刷新if (fresh) {setTimeout(() => {handleResize();}, 300)}return () => {window.removeEventListener('resize', () => {handleResize();})}}, [])return (<div className='container' ref={ref}><div className='x-scroll' style={{width: size.height + 'px', height: size.width + 'px', transform: `rotate(-90deg) translateX(-${size.height}px)`}}><div className='content' style={{width: size.width + 'px', height: size.height + 'px', transform: `rotate(90deg) translateY(-${size.height}px)`}}>{children}</div></div></div>);
}export default XScroll;

index.scss

.container {width: 100vw;height: 100vh;position: relative;overflow: hidden;.x-scroll {transform-origin: left top;overflow: hidden auto;}.content {transform-origin: left top;position: absolute;}
}

使用

example.tsx

import React from "react";
import { Image } from "antd";
import XScroll from "../index";
import "./index.scss";function Example() {return (<XScroll><div className="example"><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"/><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"/><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"/><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"/><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"/><Imagewidth={500}src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"/></div></XScroll>);
}export default Example;

example.scss

.example {display: flex;align-items: center;.ant-image {flex-shrink: 0; // 不允许被缩小}
}

按照上面的代码执行之后，你就得到了一个神奇的效果，快去试试吧

如果有帮到包子们，就帮博主点个赞吧！！
还有什么想看的效果，欢迎评论，每天都有时间鼓捣新东西