Wait until scrolling stops in ie11?

[getsetbro]

Everything is great in latest browser but janky in ie11. Can we add a debounce or wait until scrolling stops before positioning the element?

[ghost]

hello @getsetbro, just tested with ie11 but wasn't facing any problems. what do you mean by janky? could you provide a screencast of your observed behavior and describe the expected behavior. thanks.

[getsetbro]

By janky I mean glitchy and not smooth. In my medium/ large app there are other polyfills to help ie11 do all the things. It's gotten to be too much for ie11 so it would help if this module had an option to update the dom less often. Thanks for your work!

[ghost]

Hello @getsetbro we've just released v1.2.3. You are now able to set the property auditTime. The auditTime operator is then set on the source observable of the scroll event. Be aware, that values too high will also lead to glitchy behavior. Hope this helps and maybe you can tweak it a little bit with this option.

[getsetbro]

1. How do I use it?
2. I am wanting to set this only for the browsers that do not support position:fixed such as ie11.

[ghost]

You could use a variable in your component class where you use the sticky thing directive.

@Component{...}
class ComponentUsingStickyDirective implements OnInit {
    auditTime;
    ngOnInit() {
        // @see https://stackoverflow.com/questions/48182912/how-to-detect-browser-with-angular#48183194
        const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
        // if isIEOrEdge equals true then auditTime is e.g. 300 if not 0
        this.auditTime = isIEOrEdge ? 300 : 0;
    } 
}

Then in the corresponding html you could bind the auditTime to the auditTime input of your sticky element(s).

<section #boundary>
    <div #spacer></div>
    <div stickyThing="" [auditTime]="auditTime" [boundary]="boundary" [spacer]="spacer">
        Your Sticky Content
    </div>
</section>