I made a scroll to top and bottom button, which allow users to scroll to top and scroll to bottom when it is clicked. As for now , if the button is scroll-to-top icon/button, the button will appear in pages that contain vertical scrollbar only and disappear in pages that do not have vertical scrollbar. However , if the button changes to scroll-to-bottom icon/ button, the button will appear in both pages that contain scrollbar and no scrollbar. How do i make scroll to bottom button disappear in a page that do not contain vertical scrollbar? Hope someone could help me on this.
ScrollToTop.vue
<template>
<div v-scroll="onScroll" >
<v-btn v-if = "!isVisible"
fab fixed bottom right color="primary" @click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else
fab fixed bottom right color="primary" @click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
</template>
<script>
export default{
data () {
return {
isVisible: false,
position: 0,
}
},
methods: {
onScroll () {
this.isVisible = window.scrollY > 50
},
toTop () {
this.position = window.scrollY
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
},
toBottom(){
let pos = this.position > 0 ? this.position: document.body.scrollHeight
window.scrollTo({
top: pos,
behavior: 'smooth'
})
},
}
}
</script>
Default.vue
<script>
export default {
name: "DefaultLayout",
data() {
return {
hasScroll: false
};
},
methods: {
hasVerticalScroll() {
this.hasScroll = document.body.offsetHeight > window.innerHeight;
}
}
}
</script>
<template>
<v-app dark v-scroll="hasVerticalScroll">
<ScrollToTop v-if="hasScroll"></ScrollToTop>
</v-app>
</template>
if ($(document).height() > $(window).height()) {
// scrollbar
}
Using jQuery this will indicate when a a vertical scroll bar is present. From here you can control whether to show or hide the button.
Try this out
<template>
<div>
<div v-if="showMoveToBottom" class="d-flex mb-2 justify-center align-center scroll-to-bottom-btn">
<v-btn small absolute elevation="1" fab @click="onScrollToBottom">
<v-icon color="primary">mdi-chevron-down</v-icon>
</v-btn>
</div>
<div @scroll="onScroll">
Your body goes here
</div>
</div>
<script>
export default{
date(){
return {
showMoveToTop: false, // Consider this part ===> by default both buttons should not be visible, buttons visibility is gonna change according to div.
showMoveToBottom: false
}
},
methods: {
onScroll(e){
const { target } = e;
if (target.clientHeight * 2 + target.scrollTop < target.scrollHeight) {
this.showMoveToBottom = true;
} else {
this.showMoveToBottom = false;
}
},
onScrollToBottom(){
console.log("scrool to bottom called");
}
}
}
</script>
<style scoped>
.scroll-to-bottom-btn {
position: absolute;
bottom: 83px !important;
left: 0;
right: 0;
}
</style>
The same case you can do for your scrollToTop.