vue - yamase0394/memo GitHub Wiki

flexboxをスクロール

スクロール

コード簡略版

<v-container>
  <v-layout>
    <v-flex v-for="item in items"/>
  </v-layout>
</v-container>

v-containerのheightを適当に設定
v-layoutに以下を指定

overflow-y: scroll;
height: 100%;

※↑の指定の位置を変えるとv-containerのcontainerクラスのoverflow:hiddenで打ち消されるので注意

スクロールを親に伝えないようにする

nuxt 2.1.0のせいかoverscroll-behaviorが効かないので困った

v-layoutにrefを追加（ここではscrollContainerにした）
wheelイベントを監視しはみ出しそうだったらスクロールを無効化する

mounted() {
    this.$refs.scrollContainer.addEventListener("wheel", this.onScroll);
  },
beforeDestroy() {
  this.$refs.scrollContainer.removeEventListener("wheel", this.onScroll);
},
methods: {
  onScroll(event) {
    const el = this.$refs.scrollContainer;
    if (el.scrollTop === 0 && event.deltaY < 0 ||
      Math.abs(el.scrollTop - (el.scrollHeight - el.clientHeight)) <= 1 &&
      event.deltaY > 0) {
      event.preventDefault()
    }
  },
}

vue-youtube

asyncDataでデータをvideoIdをセットしないとseekToで時間を指定しての0秒から再生されてしまう
※data()での初期化は未確認

fixedな要素を親とか周りに合わせる

ドロワーの動きに合わせて縮めるたりするようにする

固定したい要素にその親のサイズを設定する

<div
  v-resize="onResize"
  ref="parent"
>
  <div :style="fixedStyle"/>
</div>

left:autoでドロワーに追従するようにする
right:0とwidth:100%で右端にくっついた状態にする

data() {
  return {
    fixedStyle: {
      "position": "fixed",
      "z-index": 2,
      "top": "auto",
      "left": "auto",
      "right": 0,
      "width": "100%",
    }  
  }
},
methods: {
  onResize() {
    this.fixedStyle["width"] = this.$refs.parent.clientWidth + "px";
  }
},
⚠️ **GitHub.com Fallback** ⚠️