如何使用 vanilla js 在 Cordova / Capacitor / Conic 中以编程方式滚动

Question

我确实进行了很多搜索，但没有找到可接受的答案，所以这就是问题以及我为其他正在为此苦苦挣扎的人的解决方案。

问题：我们不能再使用

window.scrollTo()

，以编程方式滚动它因性能问题而被禁用。

Answer 1

我有同样的问题，无法使上述解决方案起作用。

我尝试了几件事，然后让这个模式很好地工作。

import React, { useRef } from 'react';
import { IonContent, IonButton } from '@ionic/react';

const MyComponent: React.FC = () => {
  const contentRef = useRef<HTMLIonContentElement>(null);

  const handleScrollToTop = () => {
    contentRef.current?.scrollToTop(500); // Scrolls to the top over 500 milliseconds
  };

  return (
    <IonContent ref={contentRef}>
      <IonButton onClick={handleScrollToTop}>Scroll to Top</IonButton>
      {/* Your content here */}
    </IonContent>
  );
};

export default MyComponent;

Answer 2

解决方案：所以我们需要做这样的事情：

顶部 div 应该放在 html 的顶层（并且应该只有一个顶部 div），并使用以下 css：

.div-scrollable {
    overflow-y: auto;
    position: relative;
    height: 100vh;
    top: 0;
}

这样我们就可以使用顶部的 div 来滚动，这里的命令可以很好地做到这一点：

document.getElementsByClassName('div-scrollable')[0].scrollTo({ top: y, behavior: 'smooth' })

干杯！