Removing debounce / allowing for fixed position elements

[jaylinsell]

I'm currently building a site with VueJS + Nuxt, whilst using smooth-scrollbars to control the whole site.

The issues I'm having though, is because content is wrapped into the scroll-content div (applying the scrollbars to the body element), position fixed doesn't work on the header due to the translate styles.

As a work-around, I've got a listener on the scrollbar.offset.y, and then applying that to a translate property on the header so that it moves with the scroll, but because there's a 100ms debounce on the scrollbar, the header becomes extremely jumpy.

Is there anyway to control the debounce? I've tried update(true) like in the docs, but it's not actually removing any debounce, or allowing me to update the scroll position at the speed I need it to.

Any help would be appreciated.

[idiotWu]

Try options.syncCallbacks = true.

[jaylinsell]

Worked a treat, thanks!

[jaylinsell]

I'm re-opening due to issues with firefox since version 8+ of the scrollbar. The syncCallbacks = true doesn't seem to have any effect now since the update.

I removed it from my code, and everything still works as it should in all browsers except Firefox. Any fixed elements now have a bounce as you scroll in Firefox.

Is there an additional way to add syncCallbacks now? Is this something I'd now need to do within a plugin? If so, would you mind giving me an example on how I'd approach that?

[idiotWu]

syncCallbacks is deprecated in version 8+ and all callbacks are invoked synchronously. Are you doing some asynchronous stuffs while updating the layout of fixed element?

[jaylinsell]

Nope, the only asynchronous functions are to call in the posts using axios, nothing in regards to the listeners or layout.

Firefox is the only one causing the issues too - and only when using the mouse wheel or arrow keys. Dragging the scroll track doesn't cause the issue.

[idiotWu]

However this issue doesn't seem to happen in this demo on Firefox 🤔. I am wondering if you're updating the layout via vue lifecycle. There may be some tricks like batch update that caused the delay of rendering.

Can you post some of your code here?

---

PS: screenshot of call stack

[jaylinsell]

Ah, never even thought to look at the call stack! You could be right.

That's v7 in the demo though right? I thought I tested it in Firefox originally and had it working with Vue & Firefox, I must have overlooked it.

My code's a bit broken up into a few files since I'm utilising VueX, but here's a simplified version which still has the same issue. I stripped all the unrelated code. Doesn't seem like anything out of the ordinary.

<template>
    <div id="wrapper" class="wrapper">
        <site-header :style="{transform: 'translateY(' + scrollPosition + 'px)'}" />

        <nuxt v-cloak/>

        <site-footer/>
    </div>
</template>

<script>
import scrollbar from 'smooth-scrollbar'

export default {
    name: 'default-layout',
    data() {
        if (process.browser) { // I'm using SSR, this makes the script only run once it's loaded into the browser
            return {
                scrollBar: scrollbar.init(document.body),
                scrollPosition: 0
            }
        }
    },

    mounted() {
        if (process.browser) {
            this.$nextTick(() => {
                this.scrollBar.addListener(() => this.handleScroll())
            })
        }
    },

    methods: {
        handleScroll() {
            this.scrollPosition = this.scrollBar.offset.y
        }
    },

    destroyed() {
        if (process.browser) {
            this.scrollBar.removeListener();
        }
    }
}
</script>

I think you've put me in the right direction at least, in regards to the call stack.

Edit: I think you nailed it with the Async, just read this in the Vue docs: "Vue.js uses an asynchronous queue to batch DOM updates. This means when you modify some data, the DOM updates do not happen instantly: they are applied asynchronously when the queue is flushed."

[idiotWu]

That's v7 in the demo though right?

Actually it's the latest version. For now it's 8.2.5.

<site-header :style="{transform: 'translateY(' + scrollPosition + 'px)'}" />

I think it's :style directive that caused the problem. Will it be possible to set style manually with

el.style.transform = `translateY(${this.scrollPosition}px)`

[jaylinsell]

That's worked a treat. Thanks for the help!

Makes perfect sense now too - updating it outside the directive, of course isn't going to queue.