一些疑难杂症的解决方案

页面下拉刷新以及空白

const overscroll = (selectors: string) => {

    let el: any = document.querySelector(selectors)
    el.style.position = 'absolute';
    el.style.overflow = 'scroll';
    el.style.webkitOverflowScrolling = 'touch';
    el.style.top = 0;
    el.style.left = 0;
    el.style.right = 0;
    el.style.bottom = 0;

    el.addEventListener('touchstart', function () {
        var top = el.scrollTop
            , totalScroll = el.scrollHeight
            , currentScroll = top + el.offsetHeight

        //If we're at the top or the bottom of the containers
        //scroll, push up or down one pixel.
        //
        //this prevents the scroll from "passing through" to
        //the body.
        if (top === 0) {
            el.scrollTop = 1
        } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1
        }
    })

    el.addEventListener('touchmove', function (evt: any) {
        //if the content is actually scrollable, i.e. the content is long enough
        //that scrolling can occur
        if (el.offsetHeight < el.scrollHeight)
            evt._isScroller = true
    })

    document.body.addEventListener('touchmove', function (evt: any) {
        //In this case, the default behavior is scrolling the body, which
        //would result in an overflow.  Since we don't want that, we preventDefault.
        if (!evt._isScroller) {
            evt.preventDefault()
        }
    }, { passive: false })

}

使用

OverScroll('#root');

如何将一个特定 ID 的 div 滚动到浏览器的顶部

// 获取 div 元素
var element = document.getElementById("yourDivId");

// 滚动到该元素
element.scrollIntoView({ behavior: 'smooth', block: 'start' });