2017-02-01 18 views
0

スクロールにイベントリスナーを使用しています。ユーザーがページ上のどこにあるかに応じてボタンをposition:fixedからposition:relativeに変更します。私は非常に簡単なセットアップを持っている、私は反応コンポーネントをマウントするときに反応を使用している、私はスクロールイベントのスロットルでリスナーを追加します。これはデスクトップ上でうまく動作しますが、モバイルでは、スクロールが完了するまで要素の位置を変更するイベントが発生していないことがわかります。スロットリング機能を呼び出すスクロールがモバイルでスクロールされるまでJavascript、スクロールイベントリスナーは起動しません

componentDidMount() { 
    window.addEventListener('scroll', this.scrollThrottler); 
    } 

:その後、

let scrollTimeout; 
    scrollThrottler() { 
    // pass through throttle designated at 15 fps 
    if (!scrollTimeout) { 
     scrollTimeout = setTimeout(() => { 
     scrollTimeout = null; 
     this.handleScroll(); 
     }, 66); 
    } 
    } 

そして、それだけで呼び出す関数

リスナーを追加し、マウントコンポーネント上 - ここ

は、私が持っている設定がありますDOMの右の点にあるdivがそのクラスを変更するかどうかを確認します:

handleScroll() { 
    const width = this.state.windowWidth ? this.state.windowWidth : window.innerWidth; 
    const stickyBoundary = this.refs.approved.getBoundingClientRect().top + this.refs.approved.offsetHeight + this.refs.stickyBar.offsetHeight - window.innerHeight; 

    if ((width <= 991) && (stickyBoundary > 0)) { 
     this.refs.rootNode.className = 'row primary-product-block sticky-add-btn'; 
    } else { 
     this.refs.rootNode.className = 'row primary-product-block'; 
    } 

} 

これはデスクトップ上ではうまくいきますが、モバイルでは、スクロールイベントが完了するまで固定または相対位置にスナップされていないようです。これを円滑にするためにとにかくありますか?ありがとう!

答えて

-1

コードに

componentDidMount() { 
    window.addEventListener('scroll', this.scrollThrottler); 
    window.addEventListener('touchmove', this.scrollThrottler); 
} 
+0

をtouchmoveイベントを追加するには、このかかわらず、スクロールやタッチの動きの両方を発射ませんか? – ajmajmajma

+0

componentWillUnmountでEventListenerを削除することもお勧めですか? – RJM

+0

@RJMはい、私はそれをやっています、私はこの例では表示しませんでした。 – ajmajmajma