Make virtual scroller scroll to the top with a method - javascript

In my vuetify app I am using the vuetify virtual scroller for requesting more content as the user scroll down the list. Now, when the user makes a new request I would like to load the new list and make the virtual scroller scroll back to the top.
Currently, the new list is loaded in the virtual scroller but I cannot find a way to scroll back to the top, the scroller stays in the middle of the list. I want my method, which is called whenever a new query is made, to also make the virtual scroller scroll to the top.
What I've tried so far:
Setting the parameters of the virtual scroller, first and last to 0 and 11 (size of what is to be displayed)
Reloading the component with a v-if to reset it.
Looked into the vuetify documentation, nothing seems to be related to my problem.
Thank you for your help.

Related

create pinned products showcase section based on scroll in reactjs

I have a UI which looks like this"
I have tabs on the left and product showcase on the right, in one of the sections of a page. The issue is, I want the default browser scroll to stop when it reaches this section in page until all the tabs are shown one by one. Once all tabs are complete, I want the default window scroll to continue.
Is there any react.js (or javascript/jquery) library for this type of functionality?

How to restore scroll position on components (not window) in Angular on navigation?

So I have a layout like this:
Basically
<navbar/>
<router-outlet/>
Where the router-outlet has overflow: scroll, so it's scrollable (not the whole window, only the outlet part).
I'm using a reuse strategy that would keep tabs in memory rather than reinitializing them on every navigation change and it correctly restores scroll position when I remove the overflow: scroll but that doesn't keep the navbar on the top, and when using that, whenever I click back or just click on the navbar to restore that component, it keeps scrolling back to the top.
Is there a way to keep the components from redrawing every time the user goes back to them or is there anyway to restore scroll position when only a part of the window is scrollable and not the whole thing?

Delayed / animated scroll presentation

Anyone knows what I can use to create an scroll effect like the one of this website? https://www.kissthebride.fr/
When mouse wheel is used the presentation pages are shown one by one and the user is forced to stay some seconds at least on the page (if he doesn't use the right navigation).
I built my site using React. It has a pinned site navigation menu on the left, a pinned page navigation menu (to navigate through the current presentation pages) on the right and the main content on the middle. I need to apply this effect to the main content only and keep the right and left parts as they are.
The effect itself
Animation ideas
.

Semantic-UI multiple sidebars pushing each other

I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?

AJAX Horizontal Scrolling with scrollbar

I need to create something like this site, I found many jQuery infinite scrolling scripts that allow you to load contents using AJAX while you're scrolling. What I need is very similar, except I want it to be horizontal and I want to set the size of the scroll bar according to the amount of contents I have. If you check out this website you'll see that you can jump from page one to page lets say 3 without loading the second page. Any idea how they do that ? their scroll bar is draggable too ! This is exactly what I need but don't know how. Any help is appreciated.
jQuery lazyload works with horizontal scrolling too.
Look at this example that I created here.
The site you are linking to is not a "horizontal scrolling" page. That's actually pagination not scrolling. If you want to do pagination then you don't need any plug in at all. Just call your AJAX when page or tab link clicked.

Categories