[英]React.js keep scroll at bottom
I have a div
that grows in height as an animation.我有一个高度作为动画增长的
div
。 Instead of growing outside of the viewable area (and user having to scroll down), I'd like the window to automatically scroll with the div
height.而不是在可视区域之外增长(并且用户必须向下滚动),我希望窗口自动随
div
高度滚动。 Locking the scroll position at the bottom of the page would work.锁定页面底部的滚动位置会起作用。
!!This is in React!! !!这是在 React 中!!
I've tried millions of google/SO answers, none work/ arent specific enough.我已经尝试了数百万个 google/SO 答案,但没有一个工作/不够具体。
code https://github.com/coryb08/corydbaker npm install && npm start
代码https://github.com/coryb08/corydbaker
npm install && npm start
You provided very little information, but since we know it's in React, you could use JavaScript to make sure your div is scrolled all the way to the bottom at all all times.您提供的信息很少,但由于我们知道它在 React 中,您可以使用 JavaScript 来确保您的 div 始终滚动到底部。
class FullMenu extends Component {
constructor() {
super()
this.state = {
class: "",
div: ""
}
this.scrollToBottom = this.scrollToBottom.bind(this);
}
componentDidMount() {
setInterval(this.scrollToBottom, 20);
}
scrollToBottom() {
var scrollingElement = (document.scrollingElement || document.body); /* you could provide your scrolling element with react ref */
scrollingElement.scrollTop = scrollingElement.scrollHeight;
}
render() {
return (
<div id="FullMenu">
{this.state.div}
<div id="triangleDiv">
<img
className={this.state.class}
onClick={() => {
this.setState({ class: "bounce" })
let that = this
setTimeout(function() {
that.setState({
class: "",
div: <div className="menuDiv" />
})
}, 1000)
}}
src={triangle}
id="triangle"
/>
</div>
</div>
)
}
}
Note that above solution keeps the window scrolled at all times.请注意,上述解决方案始终保持窗口滚动。 If you wanted to scroll it only during animation, then you should use react's
CSSTransitionGroup
and use clearInterval
to stop this behavior in transitionEnd
lifecycle hook.如果您只想在动画期间滚动它,那么您应该使用 react 的
CSSTransitionGroup
并使用clearInterval
在transitionEnd
生命周期钩子中停止这种行为。
You can use CSS alone all you have to do is set the div styling你可以单独使用 CSS 你所要做的就是设置 div 样式
display: flex;
flex-direction: column-reverse
this should flip the div scroll and position it at the bottom这应该翻转 div 滚动并将其放置在底部
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.