当我拖入列时反应漂亮的 dnd 自动滚动 x答案

【问题标题】：React beautiful dnd auto scroll x when i dragging into columns当我拖入列时反应漂亮的 dnd 自动滚动 x
【发布时间】：2022-10-05 15:21:54
【问题描述】：

我有具有定义宽度的列和一个由溢出-x 覆盖的特定大小的容器。当我尝试拖动到最后一列时，它不会自动水平滚动。我留下样式和组件

当我删除网格主要部分的溢出属性时，拖动滚动有效，但屏幕中断

主网格样式

 grid-area: content;
  padding: 30px 20px;
  max-height: calc(100vh - 55px);
  overflow-x: hidden;

表格.tsx

<DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId=\"all-column\" type=\"card\" direction=\"horizontal\">
      {(provided) => (
        <ScrollTable>
          {mappedItems(elements).map((el, index) => (
            <TableWrapper
              ref={provided.innerRef}
              {...provided.droppableProps}
              className={el.prefix === \"Descartados\" ? \"overlay\" : \"\"}
              key={el.prefix}
            >
              <TableTitle>{el.prefix}</TableTitle>
              <Droppable
                droppableId={el.prefix}
                type=\"task\"
                direction=\"vertical\"
              >
                {(provided) => (
                  <TableColumn
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                  >
                    {el.elements.map((element, index) => (
                      <>
                        <TableItem
                          onClick={() => {
                            setCurrentTalent(element.id);
                            dispatch(showModal(\"talent-side-modal\"));
                          }}
                          className={
                            el.prefix === \"Descartados\" ? \"overlay\" : \"\"
                          }
                          key={element.id}
                          id={element.id}
                          index={index}
                        ></TableItem>
                      </>
                    ))}
                    {provided.placeholder}
                  </TableColumn>
                )}
              </Droppable>
            </TableWrapper>
          ))}
        </ScrollTable>
      )}
    </Droppable>
  </DragDropContext>

滚动表.ts

const ScrollTable = styled(\"div\")`
  width: 1200px;
  overflow: auto;
  padding-bottom: 20px;
  border-radius: 0px 5px;
  display: flex;

标签： css reactjs trello react-beautiful-dnd

【解决方案1】：

溢出-y：列内的自动正在破坏 x-scroll

【讨论】：