react-beautiful-dnd如何实现单个droppable列内部滚动而非整页滚动

你给<Droppable>组件直接加style={{overflow: "scroll"}}不生效，是因为该组件本身不会将自定义样式透传到内部渲染的DOM节点上，需要按以下规则调整实现：

方案1：仅滚动条目区域（保留列标题固定） #

这是看板场景最常用的实现，符合滚动容器绑定规则，修改你的List组件代码即可：

const List = ({ ... }) => {

  ...

  return (
    <Droppable key={status} droppableId={status}>
      {provided => (
        // 外层列容器设置固定高度，flex布局让标题固定、内容自适应
        <List style={{ height: '85vh', display: 'flex', flexDirection: 'column' }}>
          <Title>
            {`${IssueStatusCopy[status]} `}
            <IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
          </Title>
          {/* 把滚动属性加在绑定了droppable Props和ref的Issues容器上，同时设置高度限制 */}
          <Issues 
            {...provided.droppableProps}
            ref={provided.innerRef}
            data-testid={`board-list:${status}`}
            style={{ 
              flex: 1,
              overflowY: 'auto',
              /* 也可以写死高度，比如maxHeight: '700px' */
            }}
          >
            {filteredListIssues.map((issue, index) => (
              <Issue key={issue.id} projectUsers={project.users} issue={issue} index={index} />
            ))}
            {provided.placeholder}
          </Issues>
        </List>
      )}
    </Droppable>
    
  );
};

方案2：整个列（包含标题）作为滚动容器 #

如果需要连列标题一起滚动，直接把滚动属性和ref/props都绑定到外层的列根节点即可：

const List = ({ ... }) => {

  ...

  return (
    <Droppable key={status} droppableId={status}>
      {provided => (
        <List 
          {...provided.droppableProps}
          ref={provided.innerRef}
          style={{
            maxHeight: '85vh',
            overflowY: 'auto'
          }}
        >
          <Title>
            {`${IssueStatusCopy[status]} `}
            <IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
          </Title>
          <Issues data-testid={`board-list:${status}`}>
            {filteredListIssues.map((issue, index) => (
              <Issue key={issue.id} projectUsers={project.users} issue={issue} index={index} />
            ))}
            {provided.placeholder}
          </Issues>
        </List>
      )}
    </Droppable>
    
  );
};

注意事项 #

• 必须设置明确的maxHeight或者固定height属性，仅设置overflow不会触发滚动效果
• provided.innerRef和provided.droppableProps必须绑定到你设置了滚动属性的DOM节点上，这是库识别滚动容器的必要条件
• 避免给滚动容器设置多层带overflow属性的父级，防止拖拽时滚动逻辑异常

内容的提问来源于stack exchange，提问作者Kid_Learning_C