iFrame 不断强制我的页面滚动到顶部

Question

我刚刚在 WP 中制作了一个页面，其中有 3 个 iframe。一个是谷歌日历，另外两个是谷歌文档（电子表格）。

谷歌日历工作正常，但每次我点击谷歌文档中的某些内容时，它都会将我的整个页面（不是我的 iframe，而是包含三个 iframe 的页面）滚动到顶部。我只是希望它不滚动，并保持在同一个位置，这样我就可以在我的网站上编辑 Google 文档。

Answer 1

您是否有可能在 FF 中打开插入符号浏览功能？按F7切换

Answer 2

根据我的研究，Google 表格/文档/等具有一种内在行为，每当用户单击该单元格时，就会滚动到他们认为该单元格必须在的任何位置。问题是：

1. 它无法被禁用，并且
2. 它总是认为嵌入的工作表/文档位于页面顶部。

因此，当单击单元格/文档时，它会自动滚动到页面顶部。

这是一个在我的 React 应用程序中对我有用的解决方案。我所做的是添加侦听器来侦听所有滚动，然后区分是否是用户的鼠标滚动与 iframe 触发的自动滚动。我根据卷轴的大小来区分它。如果它> 250，那么我认为它一定是自动滚动，因为它相当大，因此我们通过返回到之前的位置来防止滚动（也可以与> 150等其他值一起使用）。因此，我们只允许更小的、更可能是人类的卷轴。

请注意：这对我有用，因为我的 iframe 位于网站底部。它可能不适用于没有太多滚动空间的较小网站。

import React, { useState, useEffect, useRef } from 'react';

const GoogleDocsViewer = ({ documentId }) => {
  const lastScrollY = useRef(window.scrollY);

  useEffect(() => {
    const handleWheel = () => {
      lastScrollY.current = window.scrollY;
    };

    const handleScroll = () => {
      const scrollDiff = Math.abs(window.scrollY - lastScrollY.current);
      
      if (scrollDiff > 250) {
        window.scrollTo(0, lastScrollY.current);
      } else {
        lastScrollY.current = window.scrollY;
      }
    };

    document.addEventListener('wheel', handleWheel, { passive: true });
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      document.removeEventListener('wheel', handleWheel);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    
      <iframe
        src={`https://docs.google.com/document/d/${documentId}/edit?usp=sharing&embedded=true`}
        style={{
          width: '100%',
          height: '100%',
          border: 'none',
          position: 'absolute',
          top: 0,
          left: 0
        }}
        title="Google Doc"
      />
    
  );
};

export default GoogleDocsViewer;