Question

当基于移动设备而不是基于桌面的鼠标进行触摸时，我无法捕获该组件上的任何有用事件。

我要创建自己的滚动条时身体隐藏了溢出。我的组件是100％/ 100vh，带有一个onWheel事件，它为我提供event.deltaY，我可以使用它创建想要的效果（这在桌面上可以正常工作）。我似乎无法在移动设备上使用它。我知道onWheel可能无法工作，因为它是基于触摸的，但是onTouchMove，onScroll等也不会触发任何操作。

由于尝试滚动到页面末尾，我在移动设备上也得到了“反弹”效果，但是我只希望手机能够识别div中的触摸滚动事件，以便进行CSS翻译。

组件：

import React, { Component } from "react"
import styled from "styled-components"
import { P } from "../styles/Typography.js"
import { Box } from "./Shapes.js"

export default class ParallaxWrapper extends Component {

    state = {

        offset: 0,
    }

    handleMotion = (event) => {

        const { offset } = this.state
        const intensity = .2

        let delta = event.deltaY * intensity

        delta = offset + delta > 0 ? (offset + delta) : 0

        this.setState(state => ({ offset: delta }))
    }

    render() {

        const { offset } = this.state

        return (

            <ScrollContainer onWheel={ this.handleMotion }>
                <Inner style={{ transform: `translate3d(0, -${ offset * .75 }px, 0)` }}>
                    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit sapien eu quam vulputate, sed auctor risus viverra.</P>
                    <Box central style={{ transform: `translate3d(${ offset * .05 }%, 0, 0)`, width: `${ 400 + (offset * .1) }px` }}>Something</Box>
                </Inner>
            </ScrollContainer>
        )
    }
}

const ScrollContainer = styled.div`

    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100vh;
    overflow: hidden;
`

const Inner = styled.div`

    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
`

CSS：

html, body {

    min-height: 100%;
    overflow: hidden;
}

当前在移动设备上什么也没有发生，当容器没有溢出滚动时，我似乎无法捕获任何事件，但是整个意思是我不想使用普通滚动。

还请注意，我不能使用jQuery插件，例如React。

尝试在移动设备上隐藏了主体溢出的情况下捕获组件上的滚动事件（反应）

0 个答案: