Scroll Action did not work

Hi,

I use the Window Scroll Action to show/hide the shadow at my header, see image below. It works that the shadow will be shown by scrolling, but it did not hide the shadow, when scrolled up to the top. Any suggestions why?

Thanks and best,
Max

Your second Case will only be evaluated if the first case is not (as it is an ELSE IF). If you want both cases to be evaluated every time the window is scrolled, right click on the second case and toggle it to an IF case. Then both will be checked every time.

@maxosh,
Your logic looks good and this should work–assuming these are the only cases for Window Scrolled and there are not conflicting Window Scrolled Up, Window Scrolled Down etc. Perhaps there is something else that is causing the header shadow to be shown? If you could please upload your .rp file then users here could check to see what might be going on with your code.

@davegoodman, In this case (no pun intended) an ELSE IF is needed, otherwise an “IF true” would always be triggered on a scroll and the shadow would thus always be hidden. …Unless you are implying Case 2 should be “IF [[Window.scrollY]] is less than or equal to 303” --which should also work, but should not be required unless there is something else to be done on a window scroll.

OK, I made a little demo to test this out, and the logic shown by @maxosh does work. Maybe this will help?

show-hide on scroll.rp (50.8 KB)

Ah, I missed that the second case wasn’t evaluating the same thing from the other side - yes, I’d make them explicitly cancel each other out and evaluate both on window scroll.

Thanks @mbc66 in your .rp everything works fine!

But look here in my .rp it does not work. I don’t see any difference in the code, you?

Best,
Max

Untitled.rp (49.7 KB)

No, I see no real meaningful difference… your file should work. Head scratcher. :thinking: I would guess your file is somehow corrupted or there is a bug in Axure. You can email your .rp file with description of this issue to support@axure.com . I’ll ping @Alyssa_Axure to see if she or other support person can respond to this thread.

In the browser, I clicked open the Console and clicked the “Start Trace” button. I can see the Window Scrolled event being repeatedly called; when Window.scrollY is greater than 50 that case gets triggered and the “Show header schatten” action appears. And, when less than 50, the Window Scrolled event gets called–but no action is shown, as if your Case 2 was empty or not there at all. This is wrong, leading me to suspect a bug or more likely a corrupt file (because mine works.)

Here is what I see in the Trace when scrolling back up past that 50px mark:

And your interaction code:
image

  • Well, one obvious difference between our files is that you have page dimensions and adaptive views. I added same to my file and it still works fine in all views.

  • Another difference is that your shadow widget is initially hidden in the editor, whereas my shadow is shown in the editor and has a “Loaded Hide This” action, as well as “Loaded Set Size of this to [[Window.width]]” --I successively removed these actions in my prototype and it still works correctly, showing and hiding the shadow on scroll. I then hid my shadow in the editor to match your setup and it still works correctly.

  • In your prototype, I duplicated your page and added an explicit condition to Case 2 of "IF [[Window.scrollY]] is less than or equal to 50 Hide header schatten]] and it did not change anything. I tested with “ELSE IF …” and not surprisingly, that did not change anything either.

  • In the duplicated page I added another action to your Case 2 to see if that would jog things into action (it sets the text of the header widget to the value of [[Window.scrollY]]. That did change things so the header hides/shows correctly. I then deleted the Set Text action and it still works correctly, so the interaction code of both pages looks identical, but one fails and the other works.

  • I then went back to your original page and moved your Case 2 to the top of the conditional stack, above Case 1, changed it’s condition to “IF [[Window.scrollY]] is less than or equals 50 Hide header schatten” and surprise it works! The shadow is now hidden and shown correctly. Why would this work and the other not? I have no idea… I then removed the condition from Case 1 so it reads, “ELSE IF true Show header schatten” and it still works.

So, I guess I fixed your issue, but not sure why the problem occurred in the first place.

Hmmm… yeah same as mbc66, I’m not seeing anything that would explain why the interaction in its original state doesn’t work. If simply moving Case 2 to the first position and then back fixes it without changing anything else, then it seems like somehow Case 2 was in a buggy state. @maxosh I don’t suppose you recall the exact steps you took to create that case? For example was it copied and pasted from another pages, or created from scratch? There may be a specific scenario where depending on how it was created then it doesn’t fire as expected as is, in which case we can file a bug report!

Hi Alyssa,

thanks for your support! The code I did from the scratch, also the page and prototype, which I created some days before. Interesting is your proposal to just move case 2 up and down, this worked out too in my original Prototype (from which I extracted one page to create the untitled.rp which I posted here. Do you need more information to report this as a bug?

@mbc66 thanks for help, too!

Best,
Max

Thanks for that info! Hmm, it sounds like it was created via a pretty normal route. I’ll file a bug report for it with your file, though it may be tricky to fix if we can’t reproduce it from scratch. We’ll keep an eye out in case repro steps get discovered!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.