React-Bootstrap模态框关闭后Chrome中Div横向滚动条左移问题求助

问题描述 #

在Google Chrome浏览器中使用React-Bootstrap时遇到以下问题：当Div的横向滚动条处于最右侧位置时，关闭模态框后滚动条会向左偏移一点。希望关闭模态框后，该Div的横向滚动条能保持在最右侧，请问是否需要更换模态框库？

核心滚动Div代码 #

<div style={{ overflowY: 'auto', overflowX: 'hidden', padding: '14px' }}>
  {residents.map((x, i) => {
    return (
      <div key={i}>
        <div key={i} className="box">
          <Row>
            <div className="add-residents-delete-inputs">
              {residents.length !== 1 &&
                <Button variant="danger" onClick={() => handleRemoveClick(i)}>x</Button>}
            </div>
            <Col style={{ marginLeft: '30px' }}>
              <Form.Group controlId="validationCustom01">
                <InputGroup style={{ width: 'fit-content' }} hasValidation>
                  <Form.Control
                    required
                    className="ml10"
                    name="lastname"
                    placeholder="Nom *"
                    value={x.lastname}
                    onChange={e => handleInputChange(e, i)} />
                  <Form.Control.Feedback type="invalid">
                    <small> {error} </small>
                  </Form.Control.Feedback>
                </InputGroup>
              </Form.Group>
            </Col>
            {/* 其余Col代码省略 */}
          </Row>
        </div>
        <ReusableModal sectionRef={sectionRef} btnRef={btnRef} show={showModal} onClose={onClose}
          name="aversions"
          handleSave={e => handleSave(e, i)} title="Ajout/suppression d'aversions">
          <AddAversions sectionRef={sectionRef} aversions={aversions} isCheckedList={isCheckedList}
            aversionsList={aversionsList}
            onAversionsChange={onAversionsChange} onTypeChange={onTypeChange} residents={residents} />
        </ReusableModal>
      </div>
    );
  })}
</div>

ReusableModal组件代码 #

return (
  <Modal keyboard centered backdrop={false} show={props.show} onHide={handleClose} style={{position: 'fixed'}}>
    <Modal.Header closeButton>
      <Modal.Title>{props.title}</Modal.Title>
    </Modal.Header>
    <Modal.Body>{props.children}</Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={handleClose}>
        Annuler
      </Button>
      <Button ref={btnRef} variant="primary" onClick={props.handleSave}>
        Sauvegarder
      </Button>
    </Modal.Footer>
  </Modal>
);

问题原因 #

不需要更换模态框库，这个问题通常由以下原因导致：

• 模态框关闭时，浏览器焦点自动切换到页面其他元素，触发滚动容器的位置重置
• React-Bootstrap的Modal在打开/关闭时，会调整页面主体的滚动状态（比如禁用/恢复页面滚动），间接影响了内部滚动Div的位置

解决方案 #

通过保存并恢复滚动位置即可解决，具体步骤：

1. 给滚动Div添加useRef引用，用于获取DOM元素
2. 打开模态框前，记录当前滚动Div的scrollLeft值
3. 模态框关闭的回调中，将滚动Div的scrollLeft设回之前保存的值
4. 用setTimeout或useEffect确保DOM更新后再执行恢复操作，避免React状态更新覆盖

修改后的代码示例 #

1. 父组件中添加ref和状态保存滚动位置

import { useRef, useState, useEffect } from 'react';

// ...

const scrollDivRef = useRef(null);
const [scrollPosition, setScrollPosition] = useState(0);
const [showModal, setShowModal] = useState(false);

// 打开模态框时保存滚动位置
const handleOpen = (e, i) => {
  if (scrollDivRef.current) {
    setScrollPosition(scrollDivRef.current.scrollLeft);
  }
  setShowModal(true);
  // 原有业务逻辑...
};

// 关闭模态框时触发状态变更
const onClose = () => {
  setShowModal(false);
};

// 监听模态框状态，关闭时恢复滚动位置
useEffect(() => {
  if (!showModal && scrollDivRef.current) {
    scrollDivRef.current.scrollLeft = scrollPosition;
  }
}, [showModal, scrollPosition]);

// 修改滚动Div的ref属性
<div ref={scrollDivRef} style={{ overflowY: 'auto', overflowX: 'hidden', padding: '14px' }}>
  {/* 原有内容 */}
</div>

2. 确保ReusableModal的关闭逻辑正确触发回调

// ReusableModal组件中
const handleClose = () => {
  props.onClose();
};

return (
  <Modal keyboard centered backdrop={false} show={props.show} onHide={handleClose} style={{position: 'fixed'}}>
    {/* 原有模态框内容 */}
  </Modal>
);

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