Question

正在开发一个React应用程序，并具有可以滚动到div的功能，但是它只是稍微偏离了一点，所以当它转到正确的div时，我需要使其向上滚动20像素左右。

     class CountryDropdown extends Component{

    handleScroll = (country) => {

        document.getElementById(country).scrollIntoView({
            block: "start",
            behavior: "smooth"
          })

      }

    render () {
    return (
        <Dropdown text='Jump to Country'>
            <Dropdown.Menu>
                <Dropdown.Item flag='fr' text='France' onClick={() => this.handleScroll("france")}/>
                <Dropdown.Item flag='es' text='Spain' onClick={() => this.handleScroll("spain")}/>
                <Dropdown.Item flag='pt' text='Portugal' onClick={() => this.handleScroll("portugal")}/>
                <Dropdown.Item flag='gr' text='Greece' onClick={() => this.handleScroll("greece")}/>
                <Dropdown.Item flag='de' text='Germany' onClick={() => this.handleScroll("germany")}/>
                <Dropdown.Item flag='at' text='Austria' onClick={() => this.handleScroll("austria")}/>
            </Dropdown.Menu>
        </Dropdown>
    );
}
}


 export default CountryDropdown;

Answer 1

如果它真的只有20像素，我想您可以添加一个额外的DOM事件以使其就位。不幸的是，scrollIntoView（）没有任何其他参数可让您抵消它。从好的方面来说，以下代码可以轻松完成工作。

handleScroll = (country) => {

    document.getElementById(country).scrollIntoView({
        block: "start",
        behavior: "smooth"
      })

    document.getElementById(country).scrollTop += 20
  }

如何偏移scrollIntoView（）

1 个答案: