滚动查看问题-可选组件-反应

Question

在使用scrollIntoView时遇到意外问题。我创建了一个Selectable组件，该组件具有将光标滚动到选定选项的功能。我使用“ this.scrollNode.scrollIntoView（false）; ”语法（将scrollNode设置在选定选项（选定的

旁边）附近的div上做到了这一点”

这在没有滚动的容器div中效果很好（溢出：无）。问题是我遇到了另一种情况，即其父div出现“溢出：可滚动”。这就是说，每当您打开Selectable时，整个屏幕都会移到我放置scrollNode的位置。

将父div滚动到原处而不移动整个屏幕的方法是什么？

如所附图像所示，“ section”类是可滚动的父div，而selectable是较深的子级之一。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { find, propEq, findIndex } from 'ramda';
import { Flex, Box } from 'reflexbox';
import { SelectWrapper, OptionWrapper, InputWrapper, LabelWrapper, InputContainer } from './styles';

const NEXT_NEAREST_OPTION_INDEX = 2;

export class Select extends Component {
  constructor() {
    super();
    this.state = {
      open: false,
    };
  }
  componentDidUpdate() {
    if (this.scrollNode) {
      this.scrollNode.scrollIntoView(false);
    }
  }
  handleSelectFocus = () => {
    this.setState({ open: !this.state.open });
  };
  handleOptionSelected = (optionSelected) => {
    const { onSelect } = this.props;
    this.setState({ open: false });
    onSelect(optionSelected.value);
  };
  handleOnMouseDown = (ev) => {
    if (!this.state.open) return;
    ev.preventDefault();
    ev.stopPropagation();
  };
  handleOnBlur = () => {
    this.setState({ open: false });
  };
  lookUpOption = (valueLooked) => {
    const { options } = this.props;
    const objLooked = find(propEq('value', valueLooked))(options);
    return objLooked.label;
  };
  lookUpScrollIndexes = () => {
    const { options, optionSelected } = this.props;
    const inputLabel = optionSelected ?
          this.lookUpOption(optionSelected) :
          options[0].label;
    const nextValueIndex = findIndex(propEq('label', inputLabel))(options) + NEXT_NEAREST_OPTION_INDEX;
    const selectedValueIndex = findIndex(propEq('label', inputLabel))(options);
    return options[nextValueIndex] ?
        options[nextValueIndex].value
        : options[selectedValueIndex].value;
  };
  render() {
    const { options, optionSelected, style } = this.props;
    const { open } = this.state;
    const inputLabel = optionSelected ?
        this.lookUpOption(optionSelected) :
        options[0].label;
    return (
      <Flex column onMouseDown={this.handleOnMouseDown} style={{ width: style.width, position: 'relative' }}>
        <InputContainer w={1}>
          <InputWrapper
            readOnly
            style={style}
            value={inputLabel}
            ref={input => this.input = input}
            onClick={this.handleSelectFocus}
            onBlur={this.handleOnBlur}
          />
        </InputContainer>
        { open ?
          <Box style={{ position: 'absolute', top: '25px' }}>
            <SelectWrapper >
              {options.map((option) => {
                let selectedOptionStyles = {};
                const selectedOption = option.label === inputLabel;
                if (selectedOption) {
                  selectedOptionStyles = {
                    backgroundColor: '#0164a5',
                    color: 'white',
                  };
                }
                const mergedStyles = {
                  ...style,
                  ...selectedOptionStyles,
                };
                return (
                  <OptionWrapper
                    key={option.label}
                    value={option.value}
                    style={mergedStyles}
                    onClick={() => this.handleOptionSelected(option)}
                  >
                    <LabelWrapper>{option.label}</LabelWrapper>
                    {option.value === this.lookUpScrollIndexes() ? <div ref={(node) => { this.scrollNode = node; }} /> : ''}
                  </OptionWrapper>
                );
              },
              )}
            </SelectWrapper>
          </Box> : ''
          }
      </Flex>
    );
  }
}


Select.propTypes = {
  optionSelected: PropTypes.string,
};
Select.defaultProps = {
  optionSelected: '',
};