React滚动到元素底部，不滚动iFrame父元素
的解决方案如下：
- 首先，确保你已经在React项目中引入了React和ReactDOM库。
- 在React组件中，首先创建一个ref引用来获取要滚动的元素。可以使用React的useRef钩子函数来创建ref引用。
import React, { useRef } from 'react';
const MyComponent = () => {
const scrollRef = useRef(null);
// 其他组件代码
return (
<div>
<div ref={scrollRef}>
{/* 要滚动的内容 */}
</div>
<iframe src="..." />
</div>
);
};
export default MyComponent;- 接下来，在组件加载完成后，使用ReactDOM.findDOMNode方法获取到iFrame元素，并将其父元素的滚动事件禁用。
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;- 最后，你可以使用JavaScript的scrollIntoView方法将滚动元素滚动到底部。
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;这样，当组件加载完成后，滚动元素将会滚动到底部，而iFrame的父元素将不会滚动。请注意，这个解决方案假设iFrame和滚动元素是兄弟元素，如果它们的关系不同，请相应地调整代码。
相关·内容
没有搜到相关的沙龙
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
活动推荐
腾讯云开发者
