ilyashubin/scrollbooster

Cannot drag elements

ruie opened this issue · 0 comments

ruie commented

Hi guys,

Same with the title, having issues with dragging if I added the option of bounce set to false:

`js
import React from "react";
import ScrollBooster from "scrollbooster";

import styles from "../styles/Home.module.css";

export default function HomePage() {
const viewportRef = React.useRef();
const contentRef = React.useRef();
let posX = 1;
let posY = 1;
let move = false;

React.useEffect(() => {
    // const [viewport, scrollbooster] = useScrollBoost({
    //     direction: "all",
    //     scrollMode: "transform",
    // });

    const SB = new ScrollBooster({
        viewport: viewportRef.current,
        content: contentRef.current,
        emulateScroll: false,
        bounce: true,
        onUpdate: (data) => {
            posX = Math.ceil(data.position.x);
            posY = Math.ceil(data.position.y);
            contentRef.current.style.transform =
                "translate(" +
                -data.position.x +
                "px, " +
                -data.position.y +
                "px)";
        },
        onClick: (state, event, isTouchDevice) => {
            // prevent default link event
            console.log({ state, event, isTouchDevice });
        },
    });
}, []);

return (
    <div className={styles.container} ref={viewportRef}>
        <div className={styles.content} ref={contentRef}>
            <h2 className={styles.heading}>Drag to scroll</h1>
            <h3>Some Content</h2>
            <h3>Some Content</h2>
            <h3>Some Content</h2>
            <h3>Some Content</h2>
            <h3>Some Content</h2>
            <h3>Some Content</h2>
            <h3>Some Content</h3>
        </div>
    </div>
);

}
`

`css
.container {
min-height: 100vh;
overflow: hidden;
position: relative;
}

.content {
background: #b2e1f8;
color: rgb(27, 82, 202);
width: 100vw;
height: 100vh;
}

.heading {
margin: 0;
}

`