Active class is not set when scrolling through the content

[Evghenii Ghimazitdinov]

I have a problem when scrolling through the content - the next navigation items are not set to active. I think it happens because of the modal height. What am I doing wrong here?

      <Modal centered size="lg" show={schedulerSettingsModalIsOpen} onHide={() => setSchedulerSettingsModalIsOpen(false)} >
        <Modal.Header closeButton>
          <Modal.Title>Scheduler Settings</Modal.Title>
        </Modal.Header>
        <Modal.Body className="show-grid">
                <Row>
                  <Col sm={3}>
                    <Nav variant="pills" className="flex-column">
                      <a onClick={(e) => onPress(e)} href="#first">
                        <div data-to-scrollspy-id="first" className={"ss-item"}>
                          first
                        </div>
                      </a>
                      <a onClick={(e) => onPress(e)} href="#second">
                        <div data-to-scrollspy-id="second" className={"ss-item"}>
                          second
                        </div>
                      </a>
                      <a onClick={(e) => onPress(e)} href="#third">
                        <div data-to-scrollspy-id="third" className={"ss-item"}>
                          third
                        </div>
                      </a>
                    </Nav>
                  </Col>
                  <Col sm={9} ref={parentScrollContainerRef}>
                    <Form
                      style={{
                        position: "relative",
                        overflowY: "scroll",
                        height: "30vh",
                      }}>
                      <ScrollSpy activeClass={"active-nav-item"} onUpdateCallback={(id) => console.log(id)}>
                        <div id="first" style={{height: "30vh"}}>
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                        </div>
                        <div id="second" style={{height: "50vh"}}>
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                          fdsafdsafdsfdsfdsfdsfdsfsfsdfdsfsadfdsafdsafdasfdsafdsafdsafdsa
                        </div>
                        <div id="third" style={{height: "50vh"}}>
                          1112222222222222222222
                        </div>
                      </ScrollSpy>
                    </Form>
                  </Col>
                </Row>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setSchedulerSettingsModalIsOpen(!schedulerSettingsModalIsOpen)}>
            Close
          </Button>
          <Button type="submit" variant="primary" onClick={(e) => handleSubmitClick(e)} disabled={hasErrors}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

[Hussain Pettiwala]

Hi @evgimov,
By default ScrollSpy listens for scroll events on body, but since you want to spy only on a particular scrollable container (Element) you need to pass its ref to the parentScrollContainerRef prop.

So your code would look something like:

...
<ScrollSpy activeClass={"active-nav-item"} onUpdateCallback={(id) => console.log(id)} parentScrollContainerRef={parentScrollContainerRef}>
...

Check out the docs for more clarity.

[Evghenii Ghimazitdinov]

@pettiboy I got it working by adding parentScrollContainerRef prop to the <ScrollSpy activeClass={"active-nav-item"} onUpdateCallback={(id) => console.log(id)} parentScrollContainerRef={parentScrollContainerRef}> like you suggested.
Also I set ref to the wrong scrollable container initially <Col sm={9} ref={parentScrollContainerRef}> . I changed it to

        <Form
          ref={parentScrollContainerRef}
          style={{
            overflowY: "scroll",
            height: "30vh",
          }}>

Thank you for your help!