javascript - 阻止浏览器在使用visibleChanged事件触发状态更新时向上滚动

在我的React应用程序中，当他重点关注标签时，我正在使用visibilityChange事件对登录用户进行一些检查。

问题是，在我的仪表板表 View 中，我总是跳到页面顶部并在回到选项卡时失去滚动位置(聚焦)。似乎只有在其中一个 View 中更新应用程序状态时才会发生。

有没有办法防止这种行为？

这是代码:

//==================================================================
// External dep.
//==================================================================
import Reflux from "reflux";
import React from "react";
import {
    BrowserRouter as Router,
    Route,
    Switch
} from "react-router-dom";
//==================================================================
// External dep.
//==================================================================
import DefaultLayout from ".DefaultLayout.jsx";
import Actions from "./Actions";
import Dashboard from "./Dashboard.jsx";
//==================================================================
// Router Code
//==================================================================
const mountNode = document.getElementById("app");

function renderDOM() {
    ReactDOM.render(
        <Router>
            <DefaultLayout>
                <Switch>

                    <Route exact path="/" component={Dashboard} />
                </Switch>
            </DefaultLayout>

        </Router>
        , mountNode);
}




function addVisibilityHandler(){
    // Set the name of the hidden property and the change event for visibility
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }

    function handleVisibilityChange(e) {
        e.preventDefault(); // Didnt prevent the page from scrolling to top
        e.stopPropagation();
        e.stopImmediatePropagation();

        if (!document[hidden]) {
            // Check again if the use still has permissions to see this page
            Actions.userLoggedIn();
        }


    }

    // Warn if the browser doesn't support addEventListener or the Page Visibility API
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
        logger.log("addVisibilityHandler", "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
        // Handle page visibility change
        document.addEventListener(visibilityChange, handleVisibilityChange, false);

    }
}

// Add the event handler for the visibility check
addVisibilityHandler();

// Trigger the login check
Actions.userLoggedIn();


Actions.userLoggedIn.completed.listen(function (currentUser) {
    renderDOM();
});

最佳答案

发生这种情况的原因是，您检查用户进入选项卡时是否已登录，并且在代码末尾有一个侦听器，如果用户完成登录，该侦听器将呈现DOM。

if (!document[hidden]) {
    // Check again if the use still has permissions to see this page
    Actions.userLoggedIn();
}

Actions.userLoggedIn.completed.listen(function (currentUser) {
    renderDOM();
});

解决此问题的方法之一是，传递一个标志，表明用户是首次登录或返回到该选项卡。

Actions.userLoggedIn.completed.listen(function (currentUser, flag) {
    if(flag) {
        renderDOM();
    }
});

关于javascript - 阻止浏览器在使用visibleChanged事件触发状态更新时向上滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58434599/