2017-07-14 6 views
0

react-virtualizedを使用して無限リストコンポーネントを作成し、antdを使用してモーダルコンポーネントを作成しました。リストアイテムをクリックしてモーダルを表示します。モーダルを非表示にするとリストの先頭にスクロールする

hrerはデモのリンクです:https://codepen.io/dingjs/pen/eRXZyw?editors=0010

  1. Dont'tが
  2. クリックしてリスト項目(モーダルが表示されます)
  3. モーダルのをクリックして閉じるボタンを(ウィンドウリストの一番上にスクロールします)スクロール
  4. スクロールウィンドウ
  5. の先頭に、その後のモーダルを閉じてリストから要素をクリックします(すべてがすべてRIGHある)

3番目のステップで問題が発生しました。

リストのヘッダーがブラウザの上部にある場合、ウィンドウはリストの上部にスクロールします。

答えて

0

あなたの実際の質問は明示的には言いませんが、モーダルが閉じられたときにウィンドウを上にスクロールさせたいタイトルから推測します。しかし、それはとても単純なので、あなたの実際の質問は何か違うと思っています...?

close =() => { 
    this.setState({ 
    visible: false 
    }) 
    document.getElementById('topOfList').scrollIntoView() 
} 
+0

は私の質問に答えるためにありがとうございましたそして、私はいくつかの間違った場所にはの説明であることを申し訳ありませんが、リストの先頭に

<div id="topOfList"></div> 

を入れて問題の、私は説明の一部を追加した、私はあなたがいくつかの助けを提供できることを願っています。 – Ding

+0

これまでよりも意味をなさないようになっています。あなたが何をしたいのかを記述するステップ1-5はありますか?ステップ1でスクロールしないと、リストはすでに一番上にあり、モーダルを開いたり閉じたりすると何も変わらないので、ステップ1は「DOスクロール」にする必要がありますか?ステップ3「リストへのスクロール」とステップ4「ウィンドウの上部へのスクロール」の違いは何ですか? –