如何保持每个页面的每个滚动的位置独立于shinydashboard中其他页面的滚动修改？

Question

我有一个带有多个页面的闪亮仪表板应用程序。但是，每当我离开页面 A 并进入页面 B 然后回到 A 时，A 的滚动位置会影响滚动位置 B。

我想避免这种情况（即，卷轴是独立的）？

我什至可以放一些可重现的代码，但是放在这里会太大。 所以我认为最好在 shinyGallery 中插入一个稳定的 shinydashboard 应用程序：

https://ctmm.shinyapps.io/ctmmweb/

请注意，当我在侧边栏中更改页面时，滚动不在之前的位置。

我希望每个页面的每个滚动都独立于其他滚动。

我试图在我的应用程序中插入一些CSS 和JS 代码（golem），但我无法让每个页面的卷轴相互独立。

我相信所有闪亮的仪表板都显示这种模式......

每一页都应该保持它的位置，无论我后来进入多少页并返回它。

Answer 1

此脚本将跟踪每个菜单项（“页面”）的滚动位置，并在您返回到先前滚动的页面时恢复滚动位置。

// Keep track of clicked menuitems and their scroll positions
var arrMenuPosition = [];

// Keep track of current/active menuitem to save scroll position
var currentMenuItem = null;

// Setup
var setupIndividualScrollers = () => {
    // Get a list of all menuitems
    let menuItems = document.querySelectorAll("#side_menus li");
    
    // If the length of the list is 0 then the menuitems are not yet available
    if (menuItems.length == 0)
    {
        // If this script is executed before the menuitems have been generated,
        // wait for them to be available - call this function again in 100 ms
        setTimeout(setupIndividualScrollers, 100);
    } else {
        
        // Loop through all menuitems
        menuItems.forEach(li => {
            
            // Add event listener for each menuitem
            li.addEventListener("click", function() {
                
                // Register current menuitem
                currentMenuItem = this;
                
                // Get text of current menuitem which is used to track the menuitem
                let text = currentMenuItem.textContent.trim();
                
                // Get last known scroll position of current or 0 if not available
                let position = arrMenuPosition[text] ?? 0;
                
                // Scroll window to position
                window.scrollTo(0, position);
            });     
        });
        // Set current menuitem to the first menuitem
        currentMenuItem = document.querySelector("#side_menus li").textContent.trim();
        
        // Add event listener on window for scroll event
        window.onscroll = (e) => {
            
            // Get new position in window
            var newPosition = window.pageYOffset;
            
            // Get text of current menuitem which is used to track the menuitem
            let text = currentMenuItem.textContent.trim();
            
            // Save position of current menuitem
            arrMenuPosition[text] = newPosition;
        }
    }
};
// Make initial call to function
setupIndividualScrollers();