如何偏移scrollIntoView（）

Question

Working on a React application and have this function which works to scroll to a div, but it is just slightly off so I need to have it scroll up by 20px or so when it goes to the correct div.

     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

If its really just 20px, I suppose you could just add an extra DOM event to get it in position. Unfortunately, scrollIntoView() does not have any additional parameters that lets you offset it. On the brightside the following code should get the job done without any clunkiness.

handleScroll = (country) => {

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

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