给文章添加了个目录(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>