I'm working with Vue.js and vue router, in router.js I added the scrollBehavior to make every page scroll to top.
It works fine, but the behavior is set automatically to 'smooth', so my question is: is there a way to make the behavior NOT smooth?
I tried setting it to behavior: 'auto', but it doesn't work.
Thank you!
Related
Is there a way to completely kill gsap and reset any dom changes that gsap did, e.g any css changes, transforms, pin-spacer. Right now I can use kill, but it won't clear the pin-spacer, and nor it fully clear the css changes that gsap did before its destroyed.
I want to completely wipe/clean gsap animation & revert the dom to same state as it was before initializing gsap.
Unless you've got inline styles besides the ones GSAP sets, clearProps should work for you:
gsap.to("*", {clearProps:true})
I've created a code sample stackblitz sandbox. I want to create a vue swiper
Thumbs gallery, but default code from docs does not working. The bottom carousel does not switch the top carousel.. How to fix it ?
I'm trying to work with Swiper Js to make an autoplay slider. But I wanna make a slider that is translated from left to right ( Default Right To Left ).
When I pass attribute reverseDirection everything is going well, but when I try to add pagination and that's what happens, the pagination is the first-child and goes last-child ?
So how can I reverse this pagination or have a solution to make Swiper Slide LTR, thanks for the help.
have you tried reverseDirection: true in autoplay property in Swiper options? That worked perfectly for me.
I would like my app to keep the same scrolling position when navigating back to one of my routes. It is working if I navigate back using the back button of my browser but when I click on a link (created with nuxt-link) the scroll position resets to 0 when navigating to my route.
I tried replacing the scrollBehavior function in nuxt.config.js with my own. The function is called but the savedPosition parameter is null so it's obviously the reason why the scroll position is reset. Again, if I use the back button of my browser instead of clicking a link from an other route, then there is no problem, the savedPosition parameter is set to its expected value and the scrolling happens. I don't understand why it doesn't work when navigating with a link and what I can do to solve this. Any help would be appreciated.
I believe the reason this is happening is that nuxt-link is pushing a new page onto the back stack.
With that in mind, scrollBehaviour is being called with a null savedPosition parameter because this is a brand new page. This is analogous to calling router.push() when doing programmatic navigation.
I wasn't able to find any method of emulating the back button behaviour strictly using nuxt-link, but it's simple to implement using programmatic navigation:
// go backward one page
router.go(-1)
I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.
So far so good it is done and it looks exactly as I wanted it.
The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.
I have tried with css but nothing happens. Does anyone have any hint on what I should do?
I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.
What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:
.scrollable{ height:100%; overflow:auto;}
I also tried this as it was the closest thing I could find to my problem
I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.
<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>
Navigation drawers should be scrollable if you add the app option as per the documentation
I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.
I just added this style to my drawer and it did the trick :
calc(100% - 48px); height: 100vh;
For me, the problem was that i did not put the app attribute on th v-navigation-drawer
I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>
For:
<v-navigation-drawer absolute temporary app ></v-navigation-drawer>
The adittion of app allow scrolling on my v-navigation-drawer
Just add app attribute to v-navigation-drawer tag
<v-navigation-drawer
temporary
app
width="280"
height="100vh"
>