リストのスクロール位置を記憶する

モバイル端末では、タブページ下のリストの高さが固定されていない場合、指をスライドさせると相互に影響を及ぼし、例えばカテゴリaのリストを一定距離スクロールすると切り替わります。リスト b に移動すると、カテゴリー b の下のリストも一定距離スライドします。

リストのスクロールが相互に影響を与えるのはなぜですか?

内部でスクロールしているのではなく、ボディ全体がスクロールしているため、チャネル a にいてもチャネル b にいても、実際には body 要素がスクロールしています。

ここで共有するちょっとしたトリックを紹介します。スクロールを生成する要素を素早く見つけるにはどうすればよいでしょうか。

//次のコードをブラウザのコンソールに貼り付けて Enter キーを押し、インターフェイスをスクロールすると、スクロール要素が出力されます
function findScroller(element) { 
    element.onscroll = function() { console.log(element)}
配列
    . from (element.children).forEach(findScroller); 
} 
findScroller
(document.body);

解決策: リストごとに個別のスクロール領域を設定します。  

クラススタイルをarticle-list.vue（記事リストコンポーネント）の最も外側のdivに追加します：article-list  

<stylescoped lang="less">
.article-list {   // パーセンテージの単位は親要素を基準にしています。   // height: 100%;

// ビューポート (モバイル上のレイアウト ビューポート) 単位: vw および vh、親要素の影響を受けません
  // 1vw = ビューポートの幅の 100 分の 1
  // 1vh = ビューポートの高さの 100 分の 1 height
  : 79vh;
  overflow-y: auto;
}
</スタイル>