英文:
How to always scroll into view for particular div element in React js?
问题
在用户进行交互时，我遇到了一个滚动到顶部的问题，以下是示例代码：
我已经通过在顶部和底部添加了一些虚拟空间，使用padding的方式来解决这个问题，这样无论用户进行何种交互，内容都应该始终滚动到视图中。那么，我该如何在下面的代码中实现滚动到视图的效果？
这里的内容是动态的，有时可能多一点，有时可能少一点，但我希望始终将内容滚动到视图中。
目前在应用程序中发生的情况是，当我们点击下一步按钮（假设我们有一个问答题的测验）时，它会自动滚动到顶部，而在应用程序中没有这样的功能，它会在测验中导航到问题时自动移动到顶部。所以，我希望内容始终在视图中。
这就是为什么我添加了虚拟空间来复制我遇到的问题的原因。
const App = () => {
return (
<div>
<div style={{ padding: '400px', background: '#eee' }}>虚拟空间</div>
<div id="show-content">
{/* 在这个div中，我挂载了我的React应用组件，假设我有一些问答题和一些按钮，比如上一步和下一步 */}
</div>
<div style={{ padding: '400px', background: '#eee' }}>虚拟空间</div>
</div>
);
}
英文:
This is below sample code in which I am facing scroll to top issue whenever user is interacting.
I have added the dummy space with the help of padding on top and bottom, so that whenever user interact, it should always scroll into view. So how can I achieve scroll into view with below code ?
Here content is dynamic, sometime it can be little bit more or less, I am always wanted into view part.
Currently what happening in the application, when we click on next button (assume we have quiz QA) , it automatically scroll to the top and we don't have such kind of function in application which move toward the top upon navigating question in the quiz. So, I always wanted into the view part.
That's the reason I added dummy space to replicate the issue which I am facing
return (
<div>
<div style={{padding: 400px, background: #eee}}> Dummy Space
</div>
<div id="show-content">
{/* inside this div I mounting my react app component assume, I have some quiz question along with some button prev and next */}
</div>
<div style={{padding: 400px, background: #eee}}> Dummy Space
</div>
</div>
)
}
You might be saying to remove dummy space related stuff, but there are some other app exist in those area in which I don't have control over there
答案1
得分: 1
创建一个ref并在#show-content div上使用它。使用scrollIntoView滚动到它。
const divRef = useRef();
const scrollToElement = () => {
const { current } = divRef;
if (current !== null) {
current.scrollIntoView({ behavior: "smooth" });
}
}
如果你从另一个路由导航，使用与`#show-content` div在同一组件中的以下代码：
```javascript
useEffect(scrollToElement, [])
如果你在相同的路由上， 在onClick中调用scrollToElement。
使用ref对象的方式如下：
<div id="show-content" ref={divRef}>
{/* 在这个div里我挂载了我的React应用组件，假设我有一些问题和一些按钮prev和next */}
</div>
英文:
Create a ref and and use it on the #show-content div. Scroll to it using scrollIntoView.
const divRef = useRef();
const scrollToElement = () => {
const {current} = divRef
if (current !== null){
current.scrollIntoView({behavior: "smooth"})
}
}
If you navigate from another route, use the following code in the same componenet as the #show-content div:
useEffect(scrollToElement, [])
If you are on the same route, call scrollToElement in onClick.
Use the ref object like this:
<div id="show-content" ref={divRef}>
{/* inside this div I mounting my react app component assume, I have some quiz question along with some button prev and next */}
</div>
答案2
得分: 0
你可以在组件/视图的高度已知的情况下使用 window.scrollTo(x, y)。当你的组件挂载时，可以使用这个内置的浏览器函数：
useEffect(() => {
window.scrollTo(0, 200);
}, []);
英文:
You can use window.scrollTo(x,y) if know the height of the component/view. you can use this in built browser function when your component mounts:
useEffect(()=>{
window.scrollTo(0,200)
},[])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论