JavaScript Vertical Scroll buttons for Spotfire

This article explains how to extend Spotfire with JavaScript enhancing the user interface and user experience (UI/UX) by implementing smooth scrolling features, custom scroll buttons for improved navigation, and handling.

Sometimes we want to keep a fixed height to create browser style analysis or prevent the visualizations to shrink too much by using the Page Layout Options, Locking visualization areas or using a fixed Canvas size to allow to fit more content without crumbling the visualizations together.

This solution adds custom buttons on the side of the screen when the vertical scroll bars appear. These buttons allows to go to the end of the page or to the top with a single click. This is particularly useful when the screen is not big enough or you want to check out the contents of a page at a glance. 

First we add on any Text Area the following html code to add the buttons that are displayed at the right of the screen

html

<div id="scrollButtons" style="text-align:center;background:beige;border:1px solid;cursor:pointer; gray;padding:5px;position:fixed;right:30px;top:50vh;color:black;z-index:1">
  <div id="sTop" title="scroll to top">▲</div>
  <div id="sBottom" title="scroll to bottom">▼</div>
</div>

Then we add this script that will hide the buttons when there is no scrolling to make, but are shown when it is needed. The script will add the required instructions to scroll up or down the page.

JavaScript (not smooth)

function scrollButtons() {

    const cssSelector = ".sf-element-visualization-area [style*='overflow: scroll'], .sf-element-visualization-area [style*='overflow: hidden scroll;']"

    function checkScrollbar() {
        const scrollableElement = document.querySelector(cssSelector);

        const scrollButtons = document.getElementById('scrollButtons');
        if (scrollableElement && scrollableElement.scrollHeight > scrollableElement.clientHeight) {
            scrollButtons.style.display = 'block';
        } else {
            scrollButtons.style.display = 'none';
        }
    }

    // Call checkScrollbar on page load 
    checkScrollbar();

    // Call checkScrollbar whenever the window is resized
    window.addEventListener('resize', checkScrollbar);

    document.getElementById('sTop').addEventListener('click', function() {
        const scrollableElement = document.querySelector(cssSelector);
        if (scrollableElement) scrollableElement.scrollTop = 0;
    });

    document.getElementById('sBottom').addEventListener('click', function() {
        const scrollableElement = document.querySelector(cssSelector);
        if (scrollableElement) scrollableElement.scrollTop = scrollableElement.scrollHeight;
    });
};
scrollButtons();

if you want to add smoothness to your scroll, then use this function

JavaScript (with smooth scrolling)

function scrollButtons() {
    const cssSelector = ".sf-element-visualization-area [style*='overflow: scroll'], .sf-element-visualization-area [style*='overflow: hidden scroll;']";
    const scrollButtons = document.getElementById('scrollButtons');

    let scrollableElement = null;

    function checkScrollbar() {
        scrollableElement = document.querySelector(cssSelector);
        if (scrollableElement && scrollableElement.scrollHeight > scrollableElement.clientHeight) {
            scrollButtons.style.display = 'block';
        } else {
            scrollButtons.style.display = 'none';
        }
    }

    // Call checkScrollbar on page load
    checkScrollbar();

    // Call checkScrollbar whenever the window is resized
    window.addEventListener('resize', checkScrollbar);

    document.getElementById('sTop').addEventListener('click', function() {
        if (scrollableElement) smoothScroll(scrollableElement, 0, 500);
    });

    document.getElementById('sBottom').addEventListener('click', function() {
        if (scrollableElement) smoothScroll(scrollableElement, scrollableElement.scrollHeight, 500);
    });

    // Smooth scroll function
    function smoothScroll(element, target, duration) {
        let start = element.scrollTop;
        let change = target - start;
        let startTime = performance.now();

        function animateScroll(currentTime) {
            let timeElapsed = currentTime - startTime;
            let progress = timeElapsed / duration;
            progress = Math.min(progress, 1);
            element.scrollTop = start + change * progress;
            if (progress < 1) {
                requestAnimationFrame(animateScroll);
            }
        }

        requestAnimationFrame(animateScroll);
    }
}

// Initialize the scrollButtons function
scrollButtons();

Back to the JavaScript Component Hub for Spotfire

Disclaimer

This method makes assumptions about the inner workings of Spotfire version 12.0.0 LTS Any analyses created using this hack may cause instability and performance issues and are likely to break when Spotfire is upgraded or hotfixed in the future.  Any issues resulting from applying this hack are not covered by Spotfire maintenance agreements and Support will not assist in troubleshooting problems with analysis files where this approach is used.