如何将滚动条添加到反应组件？

Question

我有一个这样的应用程序。 应用图片
我想向左侧的部分而不是整个页面添加滚动条。 滚动左侧，保持右侧固定。 这是我的代码。

function LeftContent(props) {
const { getRef, onHandleNextButton, onHandleStopRecording, ...restProps } = props;
const matches = useMediaQuery('(max-width:800px)');
const items = [...Array(15)].map((val, i) => `Item ${i}`);
return (
    <Box width={matches ? "100%" : "35%"} flex={1} bgcolor={grey[200]} boxShadow="2px 0px 4px lightgrey" zIndex={1} display="flex" flexDirection="column" overflow-y="scroll">
        <QuestionTrackerBox
            {...restProps}
        />
        <ul>
            {items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
        </ul>
        <div overflow-y="scroll">
        {!matches && <RecordedQuestionsList
            {...restProps}
        />}
        {matches && <VideoInterviewBox
            getRef={(node) => getRef(node)}
            {...restProps}
        />}
        <QuestionInformationBox
            onHandleNextButton={onHandleNextButton}
            onHandleStopRecording={onHandleStopRecording}
            {...restProps}
        />
        </div>
    </Box>
)}

function RightContent(props) {
const { getRef, ...restProps } = props;
const matches = useMediaQuery('(max-width:800px)');
if (matches) return null;
return (
    <VideoInterviewBox
        getRef={(node) => getRef(node)}
        {...restProps}
    />
)}    

我需要做哪些改变？

Answer 1

您可以使用 css 样式执行此操作，如果您在可滚动元素上设置overflow-y: scroll ，您可以获得滚动条，但只有在元素“溢出”时，也就是当元素的内容不再适合它时

Answer 2

添加滚动状

<div style={{overflowY:"scroll"}}>
</div>

Answer 3

将这些 css 添加到一个

  <style>
 div.ex1 {
  width: 200pxpx;
  height: 200px;
  overflow: scroll;
 }
</style>