我有一个聊天小部件，每当我向上滚动时，它就会弹出一个消息数组。我现在面临的问题是，当消息加载时，滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用，但我也需要知道使用哪种滚动函数来实现这一点
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
当前回答
以下是我的解决方案:
我在main div里面放了一个隐形的div，使它的位置是绝对的。然后将顶部值设置为-(头高)，并在此div上设置ref。或者你可以用children方法反应该div。
到目前为止，它工作得很好!
<div className="position-relative">
<div style={{position:"absolute", top:"-80px", opacity:0, pointerEvents:'none'}} ref={ref}></div>
其他回答
<div onScrollCapture={() => this._onScrollEvent()}></div>
_onScrollEvent = (e)=>{
const top = e.nativeEvent.target.scrollTop;
console.log(top);
}
你现在可以从react钩子API中使用useRef了
https://reactjs.org/docs/hooks-reference.html#useref
宣言
let myRef = useRef()
组件
<div ref={myRef}>My Component</div>
Use
window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })
对我有用的是:
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); // Create a ref
}
// Scroll to ref function
scrollToMyRef = () => {
window.scrollTo({
top:this.myRef.offsetTop,
// behavior: "smooth" // optional
});
};
// On component mount, scroll to ref
componentDidMount() {
this.scrollToMyRef();
}
// Render method. Note, that `div` element got `ref`.
render() {
return (
<div ref={this.myRef}>My component</div>
)
}
}
遵循以下步骤:
1)安装:
npm install react-scroll-to --save
2)导入包:
import { ScrollTo } from "react-scroll-to";
3)使用方法:
class doc extends Component {
render() {
return(
<ScrollTo>
{({ scroll }) => (
<a onClick={() => scroll({ x: 20, y: 500, , smooth: true })}>Scroll to Bottom</a>
)}
</ScrollTo>
)
}
}
也许有人会遇到像我这样的情况
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
如何度量DOM节点? 测量DOM节点位置或大小的一种基本方法是使用回调ref。每当ref附加到不同的节点时，React就会调用该回调。下面是一个小演示:
function MeasureExample() {
const [height, setHeight] = useState(0);
const measuredRef = useCallback(node => {
if (node !== null) {
setHeight(node.getBoundingClientRect().height);// you can scroll in this line
}
}, []);
return (
<>
<h1 ref={measuredRef}>Hello, world</h1>
<h2>The above header is {Math.round(height)}px tall</h2>
</>
);
}
在本例中，我们没有选择useRef，因为对象引用不会通知我们当前引用值的更改。使用回调引用可以确保即使稍后子组件显示了被测量的节点(例如，在响应单击时)，我们仍然会在父组件中得到关于它的通知，并可以更新测量值。
注意，我们将[]作为依赖数组传递给useCallback。这确保了我们的ref回调在重新渲染之间不会改变，所以React不会不必要地调用它。
在这个例子中，回调ref只会在组件挂载和卸载时被调用，因为呈现的组件在任何重新呈现器中都保持存在。如果你想在组件调整大小时收到通知，你可以使用ResizeObserver或在其上构建的第三方Hook。
