Prevent content bounce when hiding top NavBar svelte-native

Question

I have this svelte-native app and I need to hide the actionBar when the user scrolls up, the main idea is to slide the bar up when scrolled down, and bringing it back down when the content is being scrolled up. The problem lies at the hiding of the bar, I'm using the negative margin (-10px) strategy with javascript but due to doing that the content seems to be resizing and that results in a bounce.

this is a summarized version (structure) of my svelte native code:

<page class="page-css">
  <actionBar
    flat="true"
    marginLeft="-10"
    class="action-Bar {!navVisible ? 'topUp' : 'topDefault'}"
  >
    <stackLayout orientation="horizontal">
      <button on:tap={() => console.log("works +left")} />
      <label fontSize="24" verticalAlignment="center">Text</label>
      <button on:tap={() => console.log("works +right")} />
    </stackLayout>
  </actionBar>
  <scrollView orientation="vertical" bind:this={scrollView}>
    <stackLayout
      on:scroll={handleScroll}
      padding="10"
      backgroundColor={isDarkMode === 32 ? "#343434" : "#cfcfcf"}
      orientation="vertical"
    >
      {#each items as item}
        <stackLayout
          orientation="horizontal"
          width="100%"
          height={item.type === "premium" ? "140vw" : "90vw"}
          class="item"
          on:pan={handleSwipe}
        />
      {/each}
    </stackLayout>
  </scrollView>
</page>

the javascript:

import { onMount } from "svelte";

  let navVisible = true;
  let lastScrollPosition = 0;
  let scrollPosition = 0;
  let scrollView;

  onMount(() => {
    scrollView.addEventListener("scroll", handleScroll);
  });

  function handleScroll(event) {
    scrollPosition = event.object.verticalOffset;

    if (scrollPosition > lastScrollPosition) {
      navVisible = false;
    } else {
      navVisible = true;
    }

    lastScrollPosition = scrollPosition;
    console.log(navVisible);
  }

  let elements = [];

  function handleSwipe(event) {
    if (event.state === 3 && event.deltaX > 100) {
      elements.push("Element1");
    }
    console.log(elements);
  }

score 0 · Accepted Answer · answered Aug 31 '23 at 03:01

I have solved this myself. The solution is simply do not use the built in actionBar for these types of apps, instead use your own stackLayout or any related layout. The trick is to wrap everything up in an absoluteLayout so they sit on top of each other, then you extend the scrollView completely, and add a little element the same size of the bar all the way at the top. and make the transition using translateY with css. This gives the impression that its scrolling away smoothly.

Prevent content bounce when hiding top NavBar svelte-native

1 Answers1