質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    16326questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    686questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

v-forで表示した要素をクリックしたときにスクロール位置を変更する方法

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 186

gununu

score 267

v-for で表示した要素をクリックすると、クリックした要素の位置まで表示位置を変更したく、調べて作りました。

v-for で表示するときに v-bind:id="['list_item_' + index]" として連番のid名を付与して、クリックしたときに clickScroll メソッドで位置を変更するようにしました。

JavaScriptもVue.jsも初学者で上記の方法しか思いつきませんでした。

みなさんは他の方法でやってるんですか?もっとスマートやる方法もありますか?

ご存知の方、教えてくださいm(__)m

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style>
.list {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.list_item {
  width: 33.333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  list-style: none;
  padding: 100px 30px;
  margin: 0;
  box-sizing: border-box;
}
</style>
<body>

<div id="app">

<ul class="list">
  <li class="list_item" v-bind:id="['list_item_' + index]" v-for="(item, index) in items" v-on:click="clickScroll(index)">
    {{ item.title }}
  </li>
</ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        items: [
            {
                title: 'タイトル:あああああああああ'
            },
            {
                title: 'タイトル:いいいいいいいいいい'
            },
            {
                title: 'タイトル:ううううううううう'
            },
            {
                title: 'タイトル:えええええええ'
            },
            {
                title: 'タイトル:おおおおおお'
            },
            {
                title: 'タイトル:かかかかかかかかかか'
            },
            {
                title: 'タイトル:きききききききききき'
            },
            {
                title: 'タイトル:くくくくくくくく'
            },
            {
                title: 'タイトル:けけけけけけけ'
            },
            {
                title: 'タイトル:ここここここここ'
            },
            {
                title: 'タイトル:さささささささ'
            },
            {
                title: 'タイトル:しししししし'
            },
            {
                title: 'タイトル:すすすすす'
            },
            {
                title: 'タイトル:せせせせ'
            },
            {
                title: 'タイトル:そそそそ'
            },
            {
                title: 'タイトル:たたたた'
            }
        ],
        targetElement: '',
        clientRect: '',
        y: ''
    },
    methods: {

      clickScroll: function(index) {

        this.targetElement = document.getElementById("list_item_" + index);

        this.clientRect = this.targetElement.getBoundingClientRect();

        this.y = this.clientRect.top;

        window.scrollTo(0, window.pageYOffset + this.clientRect.top);

        console.log(window.pageYOffset + this.clientRect.top);

      }

    }
});
</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

idを振らずに、イベントのカレントターゲットでエレメントを取得したほうがすっきりするかなと。
私もVueを始めたばかりなので、ほかの方のご意見を聞いてみたいです。

<body>
<div id="app">
  <ul class="list">
    <li class="list_item" v-for="(item) in items" @click="clickScroll">
      {{ item.title }}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
.list {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.list_item {
  width: 33.333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  list-style: none;
  padding: 100px 30px;
  margin: 0;
  box-sizing: border-box;
}
new Vue({
  el: "#app",
  data: {
    items: [
      {
        title: "タイトル:あああああああああ"
      }
      /*以下略*/
    ]
  },
  methods: {
    clickScroll: function(e) {
      let targetRect = e.currentTarget.getBoundingClientRect();
      window.scrollTo(0, window.pageYOffset + targetRect.top);
      console.log(window.pageYOffset + targetRect.top);
    }
  }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/29 22:50

    おお!currentTargetで取得できるのですね。
    ID振らないのでこちらの方がスマートですね。
    勉強になりました。ありがとうございますm(__)m
    他の方の回答を少し待ってからベスアンを決めますので、少々お待ち下さい。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16326questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    686questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。