Question

是否有其他方法可以实现＆＃34; element.scrollIntoView({ behavior: 'smooth' });＆＃34;因为它不能在chrome和mozilla＆amp;野生动物园。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 1

如果该功能不存在，您可以使用后备：

if ((!'scrollIntoView' in document.body) {...}

使用jQuery或纯JS代码等库：

jQuery的：

function scrollToElementId(id) {
    const $element = $('#' + id);

    if ($element.length) {
        $('html, body').animate({
            scrollTop: $element.offset().top
        }, 500);
    }
}

打字稿：

export class ScrollToService {
    public smoothScroll(eID: string) {
        const elm = document.getElementById(eID);

        if (!elm) return;

        const stopY = this.elmYPosition(elm);

        this.smoothScrollToPosition(stopY);
    }

    private scrollTo(yPoint: number, duration: number) {
        setTimeout(() => {
            window.scrollTo(0, yPoint);
        }, duration);
        return;
    }

    private smoothScrollToPosition(stopY: number) {
        const startY = this.currentYPosition();
        const distance = stopY > startY ? stopY - startY : startY - stopY;

        if (distance < 100) {
            window.scrollTo(0, stopY);
            return;
        }
        let speed = Math.round(distance / 100);
        if (speed >= 20) speed = 20;
        const step = Math.round(distance / 15);
        let leapY = stopY > startY ? startY + step : startY - step;
        let timer = 0;
        if (stopY > startY) {
            for (let i = startY; i < stopY; i += step) {
                this.scrollTo(leapY, timer * speed);
                leapY += step;
                if (leapY > stopY) leapY = stopY;
                timer++;
            }
            return;
        }
        for (let i = startY; i > stopY; i -= step) {
            this.scrollTo(leapY, timer * speed);
            leapY -= step;
            if (leapY < stopY) leapY = stopY;
            timer++;
        }
    }

    private currentYPosition(): number {
        // Firefox, Chrome, Opera, Safari
        if (self.pageYOffset) {
            return self.pageYOffset;
        }

        // Internet Explorer 6 - standards mode
        if (document.documentElement && document.documentElement.scrollTop) {
            return document.documentElement.scrollTop;
        }
        // Internet Explorer 6, 7 and 8
        if (document.body.scrollTop) {
            return document.body.scrollTop;
        }

        return 0;
    }

    private elmYPosition(elm): number {
        let y: number = elm.offsetTop;
        let node = elm;
        while (node.offsetParent && node.offsetParent != document.body) {
            node = <any>node.offsetParent;
            y += node.offsetTop;
        }
        return y;
    }
}

JavaScript的：

var ScrollToService = /** @class */ (function () {
    function ScrollToService() {
    }
    ScrollToService.prototype.smoothScroll = function (eID) {
        var elm = document.getElementById(eID);
        if (!elm)
            return;
        var stopY = this.elmYPosition(elm);
        this.smoothScrollToPosition(stopY);
    };
    ScrollToService.prototype.scrollTo = function (yPoint, duration) {
        setTimeout(function () {
            window.scrollTo(0, yPoint);
        }, duration);
        return;
    };
    ScrollToService.prototype.smoothScrollToPosition = function (stopY) {
        var startY = this.currentYPosition();
        var distance = stopY > startY ? stopY - startY : startY - stopY;
        if (distance < 100) {
            window.scrollTo(0, stopY);
            return;
        }
        var speed = Math.round(distance / 100);
        if (speed >= 20)
            speed = 20;
        var step = Math.round(distance / 15);
        var leapY = stopY > startY ? startY + step : startY - step;
        var timer = 0;
        if (stopY > startY) {
            for (var i = startY; i < stopY; i += step) {
                this.scrollTo(leapY, timer * speed);
                leapY += step;
                if (leapY > stopY)
                    leapY = stopY;
                timer++;
            }
            return;
        }
        for (var i = startY; i > stopY; i -= step) {
            this.scrollTo(leapY, timer * speed);
            leapY -= step;
            if (leapY < stopY)
                leapY = stopY;
            timer++;
        }
    };
    ScrollToService.prototype.currentYPosition = function () {
        // Firefox, Chrome, Opera, Safari
        if (self.pageYOffset) {
            return self.pageYOffset;
        }
        // Internet Explorer 6 - standards mode
        if (document.documentElement && document.documentElement.scrollTop) {
            return document.documentElement.scrollTop;
        }
        // Internet Explorer 6, 7 and 8
        if (document.body.scrollTop) {
            return document.body.scrollTop;
        }
        return 0;
    };
    ScrollToService.prototype.elmYPosition = function (elm) {
        var y = elm.offsetTop;
        var node = elm;
        while (node.offsetParent && node.offsetParent != document.body) {
            node = node.offsetParent;
            y += node.offsetTop;
        }
        return y;
    };
    return ScrollToService;
}());

scrollIntoViewOption在主流浏览器中不起作用？

1 个答案: