是否可以在滚动的div中锚定滚动

Question

我正在使用 react-scrollable-anchor npm 滚动到 Bigdiv 中的 #hash 元素，但是现在我需要用页面的 85% 的滚动来包装整个div(以使页脚稳定而无需div 到达那里(，这会导致包损坏。我仍然在 URL 中得到/#element}，但我想这会导致div 中的所有文本都在页面上的同一位置，反应可滚动锚点无法识别滚动应该在手动滚动内完成，而不是在窗口中滚动了......有办法手动或其他 npm 在这种情况下可能有效(反应滚动也没有帮助(？

Answer 1

不使用任何库

import React, { createContext, useRef } from 'react'
import { useHistory } from 'react-router-dom'
const wrapperContext = createContext()
function WrapperProvider({ children }) {
  let wrapperRef = useRef(null)
  let history = useHistory()

  let getPosition = elemID => {
        let x = 0
        let y = 0
        let element = document.getElementById(elemID)
        while (element && element.className != 'main-scroll-wrapper') {
            x += element.offsetLeft - element.scrollLeft + element.clientLeft
            y += element.offsetTop - element.scrollTop + element.clientTop
            element = element.offsetParent
        }
        return { x, y }
    }
    let scrollTo = (...props) =>
        wrapperRef.current ? wrapperRef.current.scrollTo(...props) : setTimeout(() => scrollTo(...props), 0)
    let scrollToElem = async (elemID, pathname) => {
        if (typeof elemID != 'string') elemID = ''
        if (typeof pathname != 'string') pathname = '/'
        await history.push(pathname)
        let pos
        if (elemID) pos = getPosition(elemID)
        return !!elemID.length
            ? pos
                ? scrollTo({
                        behavior: 'smooth',
                        top: pos.y
                  })
                : setTimeout(() => scrollToElem(elemID, pathname), 100)
            : scrollTo({
                    top: 0,
                    behavior: 'smooth'
              })
    }
    return <wrapperContext.Provider value={{ scrollTo, scrollToElem, wrapperRef }}>{children}</wrapperContext.Provider>
}
export { wrapperContext, WrapperProvider }

用上下文包装滚动区域，破坏wrapperRef成为相关的div(在我的例子中它是类名"主滚动包装器"(，并且scrollTo或scrollToElem像chram一样工作