我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
<div onScrollCapture={() => this._onScrollEvent()}></div>
_onScrollEvent = (e)=>{
const top = e.nativeEvent.target.scrollTop;
console.log(top);
}
其他回答
使用findDOMNode最终将被弃用。
首选的方法是使用回调引用。
Github Eslint
对于读到这篇文章的人来说，如果他们没有那么幸运地使用上述解决方案，或者只是想要一个简单的即时解决方案，那么这个软件包对我来说很有用:https://www.npmjs.com/package/react-anchor-link-smooth-scroll。黑客快乐!
在阅读manny论坛后，我找到了一个非常简单的解决方案。
我用还原形式。Urgo映射redux-from fieldToClass。当出现错误时，我导航到syncErrors列表中的第一个错误。
没有裁判，没有第三方模块。只是简单的querySelector & scrollIntoView
handleToScroll = (field) => {
const fieldToClass = {
'vehicleIdentifier': 'VehicleIdentifier',
'locationTags': 'LocationTags',
'photos': 'dropzoneContainer',
'description': 'DescriptionInput',
'clientId': 'clientId',
'driverLanguage': 'driverLanguage',
'deliveryName': 'deliveryName',
'deliveryPhone': 'deliveryPhone',
"deliveryEmail": 'deliveryEmail',
"pickupAndReturn": "PickupAndReturn",
"payInCash": "payInCash",
}
document?.querySelector(`.${fieldToClasses[field]}`)
.scrollIntoView({ behavior: "smooth" })
}
只是提醒一下，我无法让这些解决方案在Material UI组件上工作。看起来他们没有当前的属性。
我只是在我的组件中添加了一个空div，并设置了ref prop。
如果你想在页面加载时做，你可以使用useLayoutEffect和useRef。
import React, { useRef, useLayoutEffect } from 'react'
const ScrollDemo = () => {
const myRef = useRef(null)
useLayoutEffect(() => {
window.scrollTo({
behavior: "smooth",
top: myRef.current.offsetTop,
});
}, [myRef.current]);
return (
<>
<div ref={myRef}>I wanna be seen</div>
</>
)
}
