Scroll position

Dash Python
1

is it possible to get fancy scroll-down effects by detecting scroll-down position as many sites do with javascipt?
I cannot figure out how to properly integrate javascript with the dashboard elements (aside from the basic linking to external JS bundle)
anybody knows of any examples available?

2

Good question! There aren’t any premade components that abstract this away for you yet but it would be possible to write your own Dash component in React that would implement this.

Here is the tutorial on writing your own Dash components: https://plot.ly/dash/plugins
Here is our tutorial on React: https://academy.plot.ly/
Here is a scroll element on NPM that might be a good fit: https://github.com/brigade/react-waypoint
The Plotly Advanced Development team can also be contracted out to build open source custom components: https://plot.ly/products/consulting-and-oem/

This would be a very cool component :slight_smile:

3

yes, would be very cool. I’ll give a look at the tutorial and the docs but I’m more on the data science than web development and I hope that some react wizard will come at rescue :stuck_out_tongue:

4

I’d like to do the same thing. Been some years now - has anyone achieved this?

5

Hello @mvern,

Could you be a little more descriptive as to what you are trying to achieve?

6

Hi @jinnyzor,
I have built a web app. I have some div’s that are currently set up to modify their opacity on hover. This reveals additional information to the user, which is the intent.
The problem with the way I have it is that the user only gets to see that additional information if they hover on the target div. What I’d like to do instead is have the div opacity automatically change when the user scrolls down on the page. This way it will automatically give them that information regardless of whether they hover. It is particularly good for those users on mobile.

I’ve understood that this is routinely done in JavaScript, and that there are potentially some limitations to do this in Dash unless a person creates their own component, which is beyond my skill set and available time for this project.

Do you know of any ways to accomplish this in Dash?

Thanks in advance for your thoughts on this.

7

Yes, you should be able to do this.

Check out the event here:

You can hook this up to alter your inline style of the elements you want to show, based upon when you want to show them. Using document.getElementById('id').style.opacity = 100 or something along those lines.

1 Like
8

Thanks @jinnyzor jinnyzor.
The concept makes sense. After many unsuccessful attempts I’ve come back to ask for more help :pensive::laughing:
The error I get is:

TypeError: The `html.Div` component (version 2.9.3) with the ID "div-app" received an unexpected keyword argument: `onscroll`
Allowed arguments: accessKey, aria-*, children, className, contentEditable, contextMenu, data-*, dir, disable_n_clicks, draggable, hidden, id, key, lang, loading_state, n_clicks, n_clicks_timestamp, role, spellCheck, style, tabIndex, title

I expect I’m missing something obvious here…story of my life :joy:

My code looks like this:

app.layout = html.Div(

    html.Div(
        children = [
            <various html content>        
        ],
        onscroll="myFunction()",
        id="div-app",
        className="app-style"
    )
)

As for the javascript part, document.getElementById(‘id’).style.opacity = 100, I’ve that, or a variation thereof, stored in a myfile.js in the assets directory.

Understanding how to access the onscroll property in context of the error described above would be very helpful.
Thanks again.

9

You cannot pass straight javascript functions to properties from dash.

To add this function, you’ll need to make an assets directory and then place a .js file in it.

Using your id, you’d have this in the js file:

myFunction() {
    # scroll oriented coding here
}

document.getElementById('div-app').onScroll = myFunction()
10

Thanks for the input @jinnyzor - you got me thinking about it in a different way that helped me get to where I needed to be.
After stabbing the dark for hours and throwing countless code Hail Mary’s (yes, I’m a hack…) I finally arrived at something that provides the functionality I need.
Turns out that a callback wasn’t required to do what I want…I think this just demonstrates how much more I have to learn about JavaScript and Dash.
Anyways, what worked was the code below.
It derives an opacity modifer for a target div based on how close target div is to center of screen.

function getOpacityModifier(inputElement) {
    var rect = inputElement.getBoundingClientRect();
    var windowHeight = window.innerHeight;
    var verticalCenter = windowHeight / 2;
    var distanceFromCenter = Math.abs(rect.top + (rect.height / 2) - verticalCenter);
    var maxDistance = verticalCenter - (rect.height / 2);
    var elementOpacity = (distanceFromCenter / maxDistance);
    return elementOpacity;
}

window.addEventListener('scroll', function() {
    // image is to fade to opacity of 0.4
    var scrollTargetDiv = document.getElementById('projects-relief-one-div');
    var opacityTargetDiv = document.getElementById('projects-relief-one-img');
    var opacityModifier = getOpacityModifier(scrollTargetDiv);
    opacityTargetDiv.style.opacity = (opacityModifier + 0.4);
});

Maybe this is helpful to someone.

Edit: The code above was put in a .js file under the assets directory.

2 Likes
11

Yes, JavaScript and CSS are both skills that are incredibly helpful to use alongside of what Dash can do without them. :slight_smile:

Glad you got it figured out. :smiley:

12

Maybe you don’t need to write any javascript to listen to scroll event, try FefferyListenScroll in my components library fuc: https://fuc.feffery.tech/FefferyListenScroll. ( I haven’t added any English documents yet. You can use some translation plug-ins to help you read them )