fix: scroll bug

Author: geekdada

package.json

@@ -92,6 +92,7 @@
     "react-hot-loader": "^4.13.0",
     "react-scroll-to-bottom": "^4.1.0",
     "sass-loader": "^10.1.0",
+    "scrollparent": "^2.0.1",
     "smoothscroll-polyfill": "^0.4.4",
     "source-map-loader": "^1.1.3",
     "style-loader": "^2.0.0",

src/global.d.ts

@@ -0,0 +1,3 @@
+declare module 'scrollparent' {
+  export default function (element: Element): Element
+}

src/pages/Content/components/TranslationItem.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import Clipboard from 'react-clipboard.js'
 import { useSnackbar } from 'notistack'
 import { Collapse } from 'react-collapse'
+import scrollParent from 'scrollparent'
 
 import logger from '../../../common/logger'
 import { TranslateResult } from '../../../common/types'
@@ -34,8 +35,22 @@ const TranslationItem: React.FC<{
       return
     }
 
+    const scrollContainer = scrollParent(parentElement)
+
     if (parentElement instanceof HTMLElement) {
-      window.scrollTo(0, parentElement.offsetTop - 20)
+      if (scrollContainer === document.body) {
+        document.documentElement.scrollTo({
+          top: parentElement.offsetTop - 20,
+          left: 0,
+          behavior: 'smooth',
+        })
+      } else {
+        scrollContainer.scrollTo({
+          top: parentElement.offsetTop - 20,
+          left: 0,
+          behavior: 'smooth',
+        })
+      }
     }
   }
 

src/pages/Content/styles/components/App.scss

@@ -3,6 +3,7 @@
   width: 450px;
   height: 600px;
   z-index: 1;
+  will-change: transform;
   @apply bg-white shadow rounded-lg overflow-hidden flex flex-col;
 
   &--inactive {

yarn.lock

@@ -7730,6 +7730,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"