css 如何让vue.js在按钮点击时向上滚动？

disho6za  于 2023-05-19  发布在  Vue.js
关注(0)|答案(1)|浏览(186)

当点击按钮时，页面应该转到顶部。
但这只是一个点击，我不能得到我想要的。
我用的是JavaScript和Vue。
下面的代码是主代码。

<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>

我已经将下面的代码插入到这段代码中。在上面的代码中，这个代码是<main-logo></main-logo>。

<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>

我想在这段代码中使用window.scrollTo(0, 0)。
但它不起作用。因为第一个代码中的overflow-y: auto;是原因。
没有它，我可以得到预期的结果。
但我也需要overflow-y: auto;。因为只有这样我才能让你看到你看不到的东西。
有没有什么方法可以解决这两个问题？

css

1条答案

按热度按时间
ohfgkhjo

ohfgkhjo1#

在你用代码更新了你的问题后，我的怀疑是正确的。滚动元素 * 不是 * 文档，因此所有尝试滚动到顶部都失败了。相反，您应该以溢出元素为目标。在这种情况下，它将是与选择器#mainboard匹配的一个。
有两种方法。最简单的方法是假设#mainboard永远存在，然后在MainLogo组件中执行滚动：

export default {
    name: 'main-logo',
    methods: {
        greet: function () {
            document.querySelector('#mainboard').scrollTo(0, 0);
        }
    }
}

但是，我强烈反对这种快速解决方案，因为MainLogo组件需要知道文档中超出其自身控制的某个位置存在元素#mainboard（这里没有关注点分离）。一个更简洁的方法，虽然更冗长，将在MainLogo组件发出某种事件之前，然后由知道它需要滚动的元素的父组件监听。例如：

export default {
    name: 'main-logo',
    methods: {
        greet: function () {
            this.$emit('scrollMainboard');
        }
    }
}

然后，在使用MainLogo组件的父组件中，它只需侦听事件并相应地对其进行操作。在模板中，可以使用v-on绑定：

<main-logo v-on:scrollMainboard="scrollMainboard" />

由于你的父组件已经有了对#mainboard元素的引用，你可以使用this.$refs.mainboard来引用它：

methods: {
    scrollMainboard: function() {
        this.$refs.mainboard.scrollTo(0,0);
    }
}
赞(0）分享  回复(0）举报  2023-05-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com