Jump to content
We've recently updated our Privacy Statement, available here. ×

Is the window.scrollTo() function in JavaScript not available in Spotfire?


Eunse LEE

Recommended Posts

I am building a dashboard screen using Spotfire.
As I build the dashboard, the height of the dashboard increases.
For the UI/UX convenience of the dashboard users, I wanted to create a button to scroll up to the top of the screen and a button to scroll down to the bottom of the screen.
I attempted to develop these buttons utilizing the Text Area's HTML Editor.
I used the window.scrollTo() function in JavaScript, but it didn't work.
I replaced it with the window.open() function and it worked perfectly, so I don't think it was a JavaScript syntax error.
Is the window.scrollTo() function not available in Spotfire?

Edited by Eunse LEE
Link to comment
Share on other sites

18 minutes ago, Eunse LEE said:

I am building a dashboard screen using Spotfire.
As I build the dashboard, the height of the dashboard increases.
For the UI/UX convenience of the dashboard users, I wanted to create a button to scroll up to the top of the screen and a button to scroll down to the bottom of the screen.
I attempted to develop these buttons utilizing the Text Area's HTML Editor.
I used the window.scrollTo() function in JavaScript, but it didn't work.
I replaced it with the window.open() function and it worked perfectly, so I don't think it was a JavaScript syntax error.
Is the window.scrollTo() function not available in Spotfire?

Sorry, I forgot to attach my code. The following is a capture of the JavaScript portion of my HTML code.

capture1.PNG

Link to comment
Share on other sites

Hello Eunse, 

Spotfire does not uses the window.scrollTo, but rather a div that contains the visualization that shows the scrollbar when needed. 

Please be careful when modifying things that are outside the scope of the text area as Spotfire can break or work unexpectedly. For that reason, please refer to the JavaScript best practices article on Text areas so, use the following code at your own risk

scrollButtons.thumb.gif.01374d5cda17e2b7701c925500f7e402.gif

<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>

 <script>
 

function checkScrollbar() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    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(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) scrollableElement.scrollTop = 0;
});

document.getElementById('sBottom').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) scrollableElement.scrollTop = scrollableElement.scrollHeight;
});

 </script>


if you want a smooth scroll, you have to create a way to mimic the smooth behavior that is not available on divs (only window.scrollTo) then do this
 

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);
}

document.getElementById('sTop').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) smoothScroll(scrollableElement, 0, 500);
});

document.getElementById('sBottom').addEventListener('click', function() {
    const scrollableElement = document.querySelector(".sf-element-visualization-area [style*='overflow: scroll']");
    if (scrollableElement) smoothScroll(scrollableElement, scrollableElement.scrollHeight, 500);
});

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...