$scroll and !show

[carstenjaksch]

Hey,

I am super excited for the convenient $scroll helper – thanks a lot!

The element should trigger a scroll to the top and hide itself, both on click. But setting the variable show in the same directive @click with the $scroll helper does only scroll on first click and hide on second.

Code:

  <div
       class="scroll-top mouse"
       x-data="{ show: false }" <!-- hidden by default -->
       x-show.transition.duration.400ms="show"
       @scroll.window="show = true" <!-- show on scroll -->
      <!-- hide and scroll to top most element on click -->
       @click="
           show = false;
           $scroll(document.getElementsByClassName('ct-section')[0]);
       "></div>

Am I missing something?

[KevinBatdorf]

Is this because you have show = true in the scroll.window event listener? You probably need something extra there to not run that code under some conditions.

[carstenjaksch]

Thanks for the hint, easy to forget this listener is there ...

I have fiddled around some time and come to a conclusion, but wonder if that could be handled more elegant.

My first attempt was to simply check for window.scrollY:

@scroll.window="window.scrollY != 0 ? show = true : show = false"

But I want that the .scroll-top element hides right after a click – not only at the top. So I extended that a little bit.

Way too much?

  <div
       class="scroll-top mouse"
       x-data="{ show: false, scrolling: false }"
       x-show.transition.duration.400ms="show"
       @scroll.window="
           var atTop = window.scrollY <= 0;

           if(scrolling && !atTop) {
               show = false;
               return;
           } else {
               scrolling = false;
           }

           if(!atTop) {
               show = true;
           } else {
               show = false;
           }
       "
       @click="
           scrolling = true;
           $scroll(document.getElementsByClassName('ct-section')[0], {offset: 32});
       "></div>

[KevinBatdorf]

If it works, ship it! :) There's multiple ways to approach this I suppose. It looks fine though, you can clean up the if/else stuff probably. show = !atTop appears to cover the logic at the bottom.

[carstenjaksch]

Thank you for the help. Such a great library, lovin' it!