Help us understand the problem. What is going on with this article?

Nuxt.js scrollBehaviorが効かない時

More than 1 year has passed since last update.

Nuxt.jsでページ遷移時に設定した scrollBehavior にしていた挙動が動かなくなりました。

原因としては全体に関わるcss内で、modal表示にその背景となるページをスクロールさせないために

html, body {
 overflow: auto;
 height: 100%;
}

としていたのがよくなかった模様。

なのでmodal表示時のみに上記の指定をさせるために

html.modalopen, body.modalopen {
 overflow: auto;
 height: 100%;
}

とクラスを設定し、modal表示時にpage componentに

pages/contact.vue
head() {
   return {
     htmlAttrs: {
       class: this.isModal ? 'modalopen' : ''
     },
     bodyAttrs: {
       class: this.isModal ? 'modalopen' : ''
     },
     ...

としてbodyとhtml要素にクラスを設定するようにしました。
ほかにもhead の属性も操作できる模様。

こちらを参考にさせていただきました。 
https://qiita.com/ykoizumi0903/items/c79b577d6ca52cec6295
https://nuxtjs.org/guide/views#app-template

dskymd
JavaScript, Vue.js, Nuxt.js書いてます。
https://dskymd.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした