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