React Radix UI ScrollArea 全高

Question

我正在为我的 Web 应用程序使用 Radix UI，我想制作一个滚动区域来填充屏幕的剩余空间并允许滚动。我尝试将滚动区域的高度设置为 100% 等，但随后表格溢出。如何使滚动区域具有定义的高度而不是像素而是百分比？

import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { Table } from "@radix-ui/themes"

const TableScrollArea = () => {
    // Create an empty array to store the objects
    const dataArray = [];

    // Define the data to be filled in the objects
    const data = {
        name: 'AAA',
        email: 'AAA',
        title: 'AAA',
    };

    // Fill the array with 1000 entries, each containing the data
    for (let i = 0; i < 1000; i++) {
        dataArray.push({ ...data });
    }


    return (
        <div className='h-full'>
            <ScrollAreaPrimitive.Root>
                <ScrollAreaPrimitive.Viewport className={`h-full`}>

                    <Table.Root>
                        <Table.Header>
                            <Table.Row>
                                <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
                                <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
                                <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
                            </Table.Row>
                        </Table.Header>

                        <Table.Body>
                            {dataArray.map(person => (
                                <Table.Row>
                                    <Table.RowHeaderCell>{person.name}</Table.RowHeaderCell>
                                    <Table.Cell>{person.email}</Table.Cell>
                                    <Table.Cell>{person.title}</Table.Cell>
                                </Table.Row>
                            ))}
                        </Table.Body>
                    </Table.Root>

                </ScrollAreaPrimitive.Viewport>
                <ScrollAreaPrimitive.Scrollbar
                    orientation="vertical"
                >
                    <ScrollAreaPrimitive.Thumb />
                </ScrollAreaPrimitive.Scrollbar>
            </ScrollAreaPrimitive.Root>
        </div>
    )

};

    export default TableScrollArea

Answer 1

我也有类似的问题；不幸的是，我无法让它与“h-full”、“h-screen”或类似的东西一起工作。

最后，为了解决这个问题，我使用了 useRef 来跟踪组件所占用的像素空间，并使用 calc 来生成绝对值。

示例：

const heightSidebarProfile = useRef<null | number>(document.getElementById(idProfile)?.offsetHeight ?? null);

<div className={`h-[calc(100%-${heightSidebarProfile.current}px)]`}>

当然，可能需要进行额外的验证以确保其有效性。

我也承认这可能不是解决问题的最佳方式，但它解决了我的情况。

Answer 2

我正在使用 shadcn，它在底层使用 Radix，并且我已经能够通过使用像这样的 asChild 属性将视口设置为 h-full。希望有帮助：

  <ScrollAreaPrimitive.Root
    className={cn("relative overflow-hidden", className)}
  >
    <ScrollAreaPrimitive.Viewport
      asChild
      className="h-full w-full rounded-[inherit]"
    >
      <div className="h-full">
         {children}
      </div>
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>