Browse Source

Fix scrolling behavior

Check if target scroll container does not need to scroll in order to
preserve scroll of other scroll container.
master
TheoryOfNekomata 2 years ago
parent
commit
dcc9abd644
1 changed files with 12 additions and 4 deletions
  1. +12
    -4
      src/pages/index.tsx

+ 12
- 4
src/pages/index.tsx View File

@@ -322,8 +322,12 @@ const IndexPage: NextPage = () => {

scrollRef.current = true;
const target = e.currentTarget
worldScrollRef.current.scrollTop = Math.floor(target.scrollTop / (target.scrollHeight - target.offsetHeight) * (worldScrollRef.current.scrollHeight - worldScrollRef.current.offsetHeight));
worldScrollRef.current.scrollLeft = Math.floor(target.scrollLeft / (target.scrollWidth - target.offsetWidth) * (worldScrollRef.current.scrollWidth - worldScrollRef.current.offsetWidth));
if (target.scrollHeight > target.offsetHeight) {
worldScrollRef.current.scrollTop = Math.floor(target.scrollTop / (target.scrollHeight - target.offsetHeight) * (worldScrollRef.current.scrollHeight - worldScrollRef.current.offsetHeight));
}
if (target.scrollWidth > target.offsetWidth) {
worldScrollRef.current.scrollLeft = Math.floor(target.scrollLeft / (target.scrollWidth - target.offsetWidth) * (worldScrollRef.current.scrollWidth - worldScrollRef.current.offsetWidth));
}
}

const handleWorldScroll: UIEventHandler<HTMLDivElement> = (e) => {
@@ -338,8 +342,12 @@ const IndexPage: NextPage = () => {

scrollRef.current = true;
const target = e.currentTarget
baseMapScrollRef.current.scrollTop = Math.floor(target.scrollTop / (target.scrollHeight - target.offsetHeight) * (baseMapScrollRef.current.scrollHeight - baseMapScrollRef.current.offsetHeight));
baseMapScrollRef.current.scrollLeft = Math.floor(target.scrollLeft / (target.scrollWidth - target.offsetWidth) * (baseMapScrollRef.current.scrollWidth - baseMapScrollRef.current.offsetWidth));
if (target.scrollHeight > target.offsetHeight) {
baseMapScrollRef.current.scrollTop = Math.floor(target.scrollTop / (target.scrollHeight - target.offsetHeight) * (baseMapScrollRef.current.scrollHeight - baseMapScrollRef.current.offsetHeight));
}
if (target.scrollWidth > target.offsetWidth) {
baseMapScrollRef.current.scrollLeft = Math.floor(target.scrollLeft / (target.scrollWidth - target.offsetWidth) * (baseMapScrollRef.current.scrollWidth - baseMapScrollRef.current.offsetWidth));
}
}

useEffect(() => {


Loading…
Cancel
Save