React滚动到元素底部，不滚动iFrame父元素

import React, { useRef } from 'react';

const MyComponent = () => {
  const scrollRef = useRef(null);

  // 其他组件代码

  return (
    <div>
      <div ref={scrollRef}>
        {/* 要滚动的内容 */}
      </div>
      <iframe src="..." />
    </div>
  );
};

export default MyComponent;

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const iframe = ReactDOM.findDOMNode(scrollRef.current).nextSibling;
    iframe.parentNode.style.overflow = 'hidden';
  }, []);

  // 其他组件代码

  return (
    <div>
      <div ref={scrollRef}>
        {/* 要滚动的内容 */}
      </div>
      <iframe src="..." />
    </div>
  );
};

export default MyComponent;

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const iframe = ReactDOM.findDOMNode(scrollRef.current).nextSibling;
    iframe.parentNode.style.overflow = 'hidden';

    const scrollElement = ReactDOM.findDOMNode(scrollRef.current);
    scrollElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
  }, []);

  // 其他组件代码

  return (
    <div>
      <div ref={scrollRef}>
        {/* 要滚动的内容 */}
      </div>
      <iframe src="..." />
    </div>
  );
};

export default MyComponent;