javascript - react ScrollTop 问题

Question

我有一长串包含在固定高度 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() 调用中，但这在这里也没有任何效果。

Answer 1

由于某些原因，我也遇到了这个问题，但它没有用。我使用 jQuery 修复了它

import React, { Component } from 'react';
import $ from 'jquery';

componentDidMount(){
       $(window).on('scroll', function() {
        let topOffset = $(this).scrollTop();

            console.log(topOffset);

        });
    }

当您移动浏览器的滚动条并查看控制台时，值会发生变化。