ilyashubin / scrollbooster

Enjoyable content drag-to-scroll library
https://ilyashubin.github.io/scrollbooster
MIT License
986 stars 81 forks source link

Cannot drag elements #61

Closed ruie closed 3 years ago

ruie commented 3 years ago

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; }

`