Question

我正在使用react-scrollable-anchor npm滚动到big div中的#hash元素，但是现在我需要用滚动条的85％来包装整个div（以使页脚稳定而不使div到达那里），这会导致程序包损坏。我仍然在网址中获得/＃element}，但是我想这会导致div中的所有文本都在页面上的同一位置，react-scrollable-anchor无法识别滚动应该在手册中完成滚动而不是在窗口中滚动... 在这种情况下是否有办法手动执行此操作或其他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（在我的情况下，其为类名“ main-scroll-wrapper”），scrollTo或scrollToElem的工作方式类似于一个chram

是否可以在滚动的div内锚定滚动？

1 个答案: