Vue使用css属性 scroll-behavior无效

给文章添加了个目录(Toc),我想点击后跳到某个位置,让他有个平滑的滚动,因此在 Article 组件使用css 的 scroll-behavior: smooth 属性,但加上去后还是那个样子,我又在 app 组件添加,还是没用

然后试了下 * { scroll-behavior: smooth; }, 这下可以了,经过调试,发现 .app-main 这个组件里添加这个属性是影响是否能平滑滚动,因此我在这个类添加这个属性,然而还是不行。。。迷茫。。。

App 组件代码如下:

<template>
  <div id="app" class="app">
        <nav-bar />
        <main class="app-main">
            <transition :name="transitionName">
                <keep-alive include="Home">
                    <router-view />
                </keep-alive>
            </transition>
        </main>
        <floating-button />
  </div>
</template>

<script>
    
    import NavBar from 'components/NavBar/NavBar'
    import FloatingButton from 'components/FloatingButton/FloatingButton'
    
    export default {
        name: "App",
        components: {
            NavBar,
            FloatingButton
        },
        data() {
            return {
                transitionName: ''
            }
        },
        watch: {
            $route(to, from) {
                if (from.meta.index < to.meta.index)
                    this.transitionName = 'slide-left'
                else
                    this.transitionName = 'slide-right'
            }
        }
    }
    
</script>

<style lang="stylus">
    
    @import('~assets/stylus/base.styl')
    
    .app
        width 100%
        height auto
        background-color #00030B
        scroll-behavior smooth
        
        .app-main
            scroll-behavior smooth
        
    .slide-right-leave-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-left-enter-active
        will-change transform
        transition all .4s
        position absolute
        left 0
        
    .slide-left-enter
        transform translateX(100%)
        
    .slide-left-leave-to
        transform translateX(-100%)
        
    .slide-right-enter
        transform translateX(-100%)
        
    .slide-right-leave-to
        transform translateX(100%)

</style>

Article 组件代码

<template>
    <div class="article">
        <div class="article-wrap" v-if="isComplete">
            <article-cover :info="info" class="article-cover" />
            <div class="article-container">
                <div id="article" class="article-content"
                    v-html="articleContent"
                    v-highlight
                    ref="content">
                </div>
                <div class="article-sidebar">
                    <side-bar></side-bar>
                    <toc ref="toc" @anchor="anchor"></toc>
                </div>
            </div>
        </div>
    </div>
</template>

// 省略了 js 

<style lang="stylus" scoped>
    
    .article
        position absolutes
        width 100%
        background-color #fff
        scroll-behavior smooth
        
        .article-cover
            width 100%
            height 42rem
            
        .article-wrap
            width 100%
            height 100%
            background-color #fff
        
            .article-container
                width 120rem
                height 100%
                margin 0 auto
                padding 4rem 0
                display grid
                grid-template-columns minmax(0, 1fr) 30rem
                grid-gap 4rem

</style>
阅读 3.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题