Skip to content

当Slider宽度超过外层容器时,点击Slider,滚动条位置异常 #1060

@joinerlz

Description

@joinerlz

复现步骤:

  1. 打开官方demo链接:https://slider-react-component.vercel.app/demo/debug
  2. 修改demo代码为:
import Slider from 'rc-slider';
import React from 'react';
import '../../assets/index.less';

export default () => {
  const [disabled, setDisabled] = React.useState(false);
  const [range, setRange] = React.useState(false);
  const [reverse, setReverse] = React.useState(false);
  const [vertical, setVertical] = React.useState(false);

  return (
    <div style={{ transform: 'scale(1.5)', transformOrigin: 'top left' }}>
      <div>
        <label>
          <input type="checkbox" checked={disabled} onChange={() => setDisabled(!disabled)} />
          Disabled
        </label>
        <label>
          <input type="checkbox" checked={range} onChange={() => setRange(!range)} />
          Range
        </label>
        <label>
          <input type="checkbox" checked={reverse} onChange={() => setReverse(!reverse)} />
          Reverse
        </label>
        <label>
          <input type="checkbox" checked={vertical} onChange={() => setVertical(!vertical)} />
          Vertical
        </label>
      </div>

      <div style={{ height: 300, width: 600 }}>
        <Slider
          onChange={(nextValues) => {
            console.log('Change:', nextValues);
          }}
          onChangeComplete={(v) => {
            console.log('AfterChange:', v);
          }}
          min={0}
          max={1}
          defaultValue={0.81}
          step={0.01}
        />
      </div>
    </div>
  );
};
  1. 代码块外有滚动条,点击slider,滚动条位置异常
  2. 分析到原因:因为在点击组件时,调用了滑块的focus事件导致
20250326-154309.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions