कैसे एक div के अंदर देखने के लिए स्क्रॉल प्राप्त करने के लिए?

मैंने जो मुख्य चीज़ जोड़ी थी वह थी ref लॉजिक बनाना।

घटक और बाहरी रेंडर () में, हम अपने सभी रेफरी का ट्रैक रखने के लिए एक सरणी परिभाषित करते हैं।

  itemRefs = []

प्रत्येक टैग में उपलब्ध रेफ प्रोप में पास करके वह सरणी .map() में पॉप्युलेट हो जाती है।

{searchResults.map((item, index) => {
    return (
      <li
         ref={ref => (this.itemRefs[index] = ref)}
         onClick={() => this.goToItem(index)}
         className={cursor === index ? 'active' : null}
      >
        <label className="first-lb">{item.id}</label>
        <label className="second-lb">{item.name}</label>
        <label className="third-lb">{item.address}</label>
      </li>
    )
})}

फिर हमारे पास एक ऑनक्लिक-हैंडलर है जो एक रेफरी इंडेक्स स्वीकार करता है, जिसका उपयोग हम उस चयनित आइटम में स्क्रॉल करने के लिए करते हैं।

  goToItem = index => {
    if (this.itemRefs[index]) {
      this.itemRefs[index].scrollIntoView({behavior: 'smooth', nearest: "block"})
    }

    this.setState({
      cursor: index,
    })
  }

इसके अतिरिक्त, स्क्रॉल ईवेंट को एरो-की डाउन और एरो-की अप पर हैंडल करने के लिए।

  _keyDownOnSearchResults = e => {
    const {cursor, searchResults} = this.state
    if (e.keyCode === 38 && cursor > 0) {
      this.itemRefs[cursor - 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor - 1,
      }))
    } else if (e.keyCode === 40 && cursor < searchResults.length - 1) {
      this.itemRefs[cursor + 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor + 1,
      }))
    }
  }