我有一长串包含在固定高度 UL 标签中的元素。理想情况下,我想在单击列表项时滚动到列表顶部加上一个偏移量(比如 10px 左右)。
我在我的 ListItem 组件上设置了一个引用,它通过 onClick 事件传递。在我的 ref 上调用 scrollIntoView() 按预期工作并滚动到列表的顶部,但尝试在我的 ref 上手动设置 scrollTop 值什么都不做,而且似乎总是停留在 0。
此处显示的示例:https://jsfiddle.net/zsh2v1/sc9ux3dd/
onListItemClick(e, ref) {
ref.scrollIntoView();
ref.scrollTop += 10;
console.log(ref.scrollTop); // why is this still zero?
}
那么为什么这个 scrollTop 值没有改变呢?有没有更好的方法来设置这个偏移量?类似的帖子似乎将矛头指向了您的 UL 的样式,但我已经在该 UL 上设置了固定的高度。我也试过按照其他一些帖子的建议将其放入 setTimeout() 调用中,但这在这里也没有任何效果。
最佳答案
由于某些原因,我也遇到了这个问题,但它没有用。我使用 jQuery 修复了它
import React, { Component } from 'react';
import $ from 'jquery';
componentDidMount(){
$(window).on('scroll', function() {
let topOffset = $(this).scrollTop();
console.log(topOffset);
});
}
当您移动浏览器的滚动条并查看控制台时,值会发生变化。
关于javascript - react ScrollTop 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48875785/