Closed ruie closed 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; }
`
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;
} `
`css .container { min-height: 100vh; overflow: hidden; position: relative; }
.content { background: #b2e1f8; color: rgb(27, 82, 202); width: 100vw; height: 100vh; }
.heading { margin: 0; }
`