Forum

adding scrolltop on Div

05 April 2017 15:00
Hi everyone,
cannot thank you all for the help with my project.
I have been using the custom anchors on my screen to create pop-up divs that show information.
This information is rather long and I have set the div to scroll all functions great.
Unfortunately when you open a div and scroll down, then open another and finally go back to the first div it remembers where you left the scrollbar.
What I would really like to happen is that when you open a div it always starts at the top.
I have tried using scrollTop (0) code on the customer anchor javascript but it does not do anything.

My code looks like this:
var declareslide_div = document.createElement("div");
declareslide_div.id = "declare_anchor";
declareslide_div.innerHTML = "<p class='title'>…Content goes here..</p>";
declareslide_div.style.overflow = "scroll";
declareslide_div.scrollTop = "0";

Any suggestions on how I can solve this.
Many thanks for all the support
05 April 2017 17:09
I attached the file - scroll.html.

.scrollTop = 0 works.
05 April 2017 19:25
Thank you Dmitry for replying so quickly.
unfortunately the divs containing the content are created through a javascript function based on the custom anchors script code. These are all created as the app loads via javascript and then they are made visible from buttons within the 3d scene using empties/general anchors.
My issue is that once you have looked at the divs, hide them and then re-open them later they are still set at the last scroll position.
What I would like to happen is that everytime I show the div from the 3d scene I would like them to start at the top

Thank you again and if you have any more suggestions that would be wonderful
06 April 2017 10:37
Hy i'm not sure if it helps but maybe you could add a eventlistener on your div via your Js functions. So that even if they are dynamicaly populated they would have right property's.
06 April 2017 11:00
Hi Luke
im not sure I would know how to do that, as I really am a newbie when it comes to javascript and I have been doing a lot of cut and paste and hours of fiddling.
Thanks for the suggestion, I will see if google has an answer with regards to the event listener, you never know I may get lucky
06 April 2017 11:16
Hi everyone,
I think lukes suggestion is a good one but Im unsure how to do this. I did a quick cut/paste and amend and the code could be something like this

document.getElementById("declare_anchor").addEventListener("hidden", declare_anchor.scrollTop=0);

do you think this would work as everytime the div is "hidden" it would reset the scroll to top.
Secondly where would I even place this javascript in the head of my html or a new javascript file called from the head

many thanks, for your support and suggestions
06 April 2017 18:04
I'm not sure. If hidden is recognised as an event it should be ok.
If not you probably could use onclick.
07 April 2017 10:27
Hi simblen, if you have a function for opening a div, then you can use scrollTop in it. You can scroll at the moment of opening instead of closing.
Blend4Web Team
07 April 2017 17:08
Hi Ivan,
thank you for your suggestion. I am using the custom-anchor code snippet which is linked to an empty anchor.
These anchors are shown/hidden from within the node tree of the 3d scene and only load once.
which is why i think they keep the scroll position as they are never kiled or re-opened.
this is why I was looking for some way of creating an event listener to see when these divs were "hidden" and when this returns true set a function to reset the scrolltop: 0;

thanks for the thought though, this is a tough one for me to find a solution
07 April 2017 18:16
These anchors are shown/hidden from within the node tree of the 3d scene and only load once.
Ah, I get it. In this case you can use the following snippet:
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.target.style.visibility == "hidden")
                mutation.target.scrollTop = 0;
        });    
    });

    observer.observe(document.getElementById("declare_anchor"), { attributes: true } );

- this is not a standard event listener, but a special object for reacting to the changes in a DOM: MutationObserver

Alternatively, you can use the "JS Callback" node after every "Hide" in the node tree and specify a function which will be called as a callback. In that function you can do the scrolling via scrollTop.
Blend4Web Team
 
Please register or log in to leave a reply.