时间戳

首页 > 解决方案 > 使用 visibilityChange 事件触发状态更新时防止浏览器向上滚动

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

问题描述

在我的反应应用程序中，当他关注选项卡时，我正在使用该visibilityChange事件对登录用户进行一些检查。

问题是，在我的仪表板表格视图中，我总是跳到页面顶部并在返回选项卡（聚焦）时失去滚动位置。它似乎只发生在我在其中一个视图中更新应用程序的状态时。

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

这是代码：

//==================================================================
// 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();
});

标签： javascriptreactjs

解决方案

每次用户返回页面时，您都会重新渲染 DOM。

发生这种情况是因为您在用户进入选项卡时检查用户是否已登录，并且如果用户完成登录，代码末尾有一个侦听器会呈现 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();
    }
});

推荐阅读