Issue
When the button is clicked, the page should go to the top.
But it's just a click, I can't get what I want.
I am using javascript and vue.
The code below is the main code.
<template>
<div id="mainboard" ref="mainboard">
<main-logo></main-logo>
<b-container class="body">
<grid-board v-if="viewMode === 'grid'" v-bind:postListProps="postList" v-bind:focusedPostID="focusedPost.id"></grid-board>
<b-row v-if="viewMode === 'grid'">
<b-col>
<infinite-scroll v-bind:clientHeight="clientHeight"
v-bind:scrollHeight="scrollHeight"
v-bind:scrollTop="scrollTop"
v-bind:thresholdProp="threshold"
v-bind:messageProp.sync="scrollMsg"
@need-more="onScrollReachedBottom"></infinite-scroll>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import Hashtag from './Hashtag.vue'
import Scrollbar from './Scrollbar.vue'
export default {
components: { Scrollbar, Hashtag },
name:
'MainBoard',
data () {
return {
msg: 'hello world',
viewMode: 'grid',
openSideList: false,
focusedPost: {},
inputText: '',
clientHeight: 0,
scrollHeight: 0,
scrollTop: 0,
threshold: 200,
scrollMsg: '',
isLoading: false,
dummyCnt: 0,
postList: [
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
},
{
id: '993915c4-878b-4486-b9a8-052971a9620d',
title: 'aaaa',
descript: 'This is ...',
date: '2021/04/09',
profileImg: 'https://avatars.githubusercontent.com/u/16532326?v=4',
writer: 'stories2stories2stories2stories2stories2stories2stories2stories2stories2',
good: 1,
img: 'https://upload.wikimedia.org/wikipedia/commons/9/90/Seoul_City_Hall_20190608_001.jpg',
lat: 37.566543,
lot: 126.978421
}
]
}
},
watch: {
viewMode: {
immediate: true,
handler (val) {
this.$nextTick(() => {
if (this.$refs.sidelist) {
this.$refs.sidelist.addEventListener('scroll', this.scrollHandler)
}
})
}
}
},
mounted () {
const dev = localStorage.getItem('dev') || false
if (dev) {
this.postList = JSON.parse(localStorage.getItem('postList')) || []
}
this.$refs.mainboard.addEventListener('scroll', this.scrollHandler)
this.$refs.mainboard.addEventListener('resize', this.scrollHandler)
this.scrollHandler()
},
methods: {
onScrollReachedBottom () {
console.log(`[MainBoard] [onScrollReachedBottom] let's get more data`)
if (!this.isLoading) {
this.scrollMsg = ''
this.isLoading = true
setTimeout(() => {
this.isLoading = false
if (this.dummyCnt < 1) {
this.dummyCnt++
const dummy = JSON.parse(JSON.stringify(this.postList))
// this.postList = this.postList.concat(dummy)
dummy.forEach(item => {
this.postList.push(item)
})
console.log('concat', this.postList.length)
} else {
this.scrollMsg = '더 이상 리뷰가 없어요'
}
}, 2000)
}
},
scrollHandler () {
switch (this.viewMode) {
case 'grid':
if (this.$refs.mainboard) {
this.clientHeight = this.$refs.mainboard.clientHeight
this.scrollHeight = this.$refs.mainboard.scrollHeight
this.scrollTop = this.$refs.mainboard.scrollTop
} else {
console.warn(`[MainBoard] [scrollHandler] Undefined mainboard ref`)
}
break
case 'map':
if (this.$refs.sidelist) {
this.clientHeight = this.$refs.sidelist.clientHeight
this.scrollHeight = this.$refs.sidelist.scrollHeight
this.scrollTop = this.$refs.sidelist.scrollTop
} else {
console.warn(`[MainBoard] [scrollHandler] Undefined sidelist ref`)
}
break
}
if (this.scrollMsg && this.clientHeight + this.scrollTop <= this.scrollHeight - this.threshold) {
this.scrollMsg = ''
}
}
}
}
</script>
<style scoped>
#mainboard {
position: relative;
width: 100vw;
height: 100vh;
overflow-y: auto;
}
</style>
I have inserted the following code into this code.
This code is <main-logo></main-logo> in the code above.
<template>
<div class = "main-logo">
<b-button class = "logo-img" pill variant="danger" v-on:click="greet()">메인로고입니다</b-button>
</div>
</template>
<script>
export default {
name: 'main-logo',
methods: {
greet: function () {
window.scrollTo(0, 0)
console.log('click')
}
}
}
</script>
<style scoped>
.main-logo {
position: fixed;
width: 100vw;
padding-top: 60px;
padding-bottom: 60px;
background: goldenrod;
z-index: 1;
}
</style>
I want to use window.scrollTo(0, 0) in this code.
But it doesn't work. Because overflow-y: auto; in the first code is the cause.
Without it, I can get the desired result.
But I also need overflow-y: auto;. Because that's the only way I can show you things you can't see.
Is there any way to solve the problem by using both?
Solution
My suspicions were correct after you updated your question with your code. The scrolling element is not the document, therefore all your attempts to scroll to top has failed. Instead, you should be targetting the overflowing element instead. In this case, that will be the one that matches the selector #mainboard.
There are two ways to do it. The quick and dirty way is to simply assume that #mainboard will always exist, and you simply perform the scrolling in the MainLogo component:
export default {
name: 'main-logo',
methods: {
greet: function () {
document.querySelector('#mainboard').scrollTo(0, 0);
}
}
}
However, I strongly discourage this quick solution simply because MainLogo component needs to know that somewhere in the document, beyond its own control, that an element #mainboard exists (there is no separation of concerns here). A cleaner method, albeit more verbose, will be fore the MainLogo component to emit some kind of event, which is then listened to by the parent component who has knowledge of the element it needs to scroll. For example:
export default {
name: 'main-logo',
methods: {
greet: function () {
this.$emit('scrollMainboard');
}
}
}
Then, in the parent component that consumes the MainLogo component, it simply has to listen to the event and act on it accordingly. In the template, you can use the v-on binding:
<main-logo v-on:scrollMainboard="scrollMainboard" />
And since your parent component already has a reference to the #mainboard element, you can just reference it using this.$refs.mainboard:
methods: {
scrollMainboard: function() {
this.$refs.mainboard.scrollTo(0,0);
}
}
Answered By - Terry
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.