滚动条消失在 fluentui/react 样式组件中滚动列表的可见页面下方

问题描述

在我的 React 项目中，我使用 fluentui/react 进行样式设置。我在我的一个组件中遇到了一个问题，其中我有一个 DetailsList。

可以选择滚动条并上下滚动页面以查看结果。但是，如果我一直拖到列表底部，滚动条就会在 Chrome 中的可见显示下方消失。我仍然可以使用鼠标上的滚轮向上滚动，直到滚动条重新出现，但显然我根本不希望它消失。

我有另一个具有相同样式设置的组件 - 据我所知 - 在该组件中，滚动条不会在页面底部消失，所以我不确定发生了什么，或者如何解决它。

我所指的特定 DetailsList 块如下所示：

  <DetailsList
    onActiveItemChanged={this._onActiveItemChanged.bind(this)}
    items={this.props.devices.map((value) => {
      return this.gridColumnData(value);
    })}
    columns={this.gridColumns()}
    selectionMode={SelectionMode.single}
    setKey="set"
    layoutMode={DetailsListLayoutMode.justified}
    isHeaderVisible={true}
    styles={{
      root: {
        cursor: "pointer",'margin-bottom': '80px',},}}
  />

我的完整渲染部分如下所示：

  render() {
    return (
      <Stack disableShrink gap={15}>
      <Breadcrumb
        items={[
          {
            text: <Text variant="xLarge">Mobile Devices</Text>,key: "ArkMobileDevices",isCurrentItem: true,]}
        componentRef={(ref) => (this.breadcrumb = ref)}
        styles={{
          root: {
            margin: 0,padding: 0,}}
      />
    
      <Stack
        horizontal
        verticalAlign="baseline"
        gap={15}
        styles={{
          root: {
            "flex-wrap": "wrap",}}
      >
        <Text>
          <b>Filter By</b>
        </Text>
        <TextField
          label="Username:"
          defaultValue={this.props.filters.username}
          onChange={this._onFilterBy("username")}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
        />
        <TextField
          label="Class:"
          defaultValue={this.props.filters.class}
          onChange={this._onFilterBy("class")}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
        />
        <TextField
          label="Manufacturer:"
          defaultValue={this.props.filters.manufacturer}
          onChange={this._onFilterBy("manufacturer")}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
        />
        <TextField
          label="Model:"
          defaultValue={this.props.filters.model}
          onChange={this._onFilterBy("model")}
          styles={{ root: { maxWidth: 300 } }}
          borderless
          underlined
        />
      </Stack>
      <DetailsList
        onActiveItemChanged={this._onActiveItemChanged.bind(this)}
        items={this.props.devices.map((value) => {
          return this.gridColumnData(value);
        })}
        columns={this.gridColumns()}
        selectionMode={SelectionMode.single}
        setKey="set"
        layoutMode={DetailsListLayoutMode.justified}
        isHeaderVisible={true}
        styles={{
          root: {
            cursor: "pointer",}}
      />
    </Stack>
    );
  }

注意：我还遇到了列表中最后几列无法查看的问题，因此我添加了一个边距底部：

styles={{
  root: {
    cursor: "pointer",}}

但这并没有解决滚动条在可见页面底部下方消失的问题。我也尝试将相同的 '80px' 'margin-bottom' 添加到第一个 Stack 块，认为这是父块并且可能会解决问题，但它没有。

仅供参考，我的列定义如下：

const columns = [
  {
    key: 'username',name: 'Username',fieldName: 'username',minWidth: 90,maxWidth: 140,priority: 1,{
    key: 'class',name: 'Year',fieldName: 'class',minWidth: 70,maxWidth: 100,priority: 2,{
    key: 'manufacturer',name: 'Make',fieldName:'manufacturer',{
    key: 'model',name: 'Model',fieldName: 'model',{
    key: 'appVersion',name: 'App Version',fieldName: 'appVersion',];

如何解决滚动条在可见页面底部消失的问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）