ScrollY/scrollTopスプライトはhtmlと体の高さが100％

あるとき、私はクロームのスクロールバグを修正するためにhtml/bodyにheight: 100%とoverflow: autoを使用しています動作しません。ただし、ScrollY/ScrollTopは常に0を返します。この場合スクロール位置を確認する方法はありますか？ScrollY/scrollTopスプライトはhtmlと体の高さが100％

HTML：

<html> 
    <body> 
     <div class="wrapper"> 
      <div class="top-nav"> 
      <div class="scroll-wrapper"> 
     </div> 
    <body> 
</html>

CSS：

html { 
    height: 100%; 
    overflow: auto; 

    body { 
     height: 100%; 
     overflow: auto; 

     .wrapper { 
      .top-nav { 
       z-index: 999; 
       position: fixed; 
       top: 0; 
      } 
      .scroll-wrapper { 
       padding-top: 45px; 
      } 
     } 
    } 
}

JS：

// Add style to top-nav when scrolling down 

    $('.wrapper').scroll(function() { 
     if (window.scrollY > 0)      //always 0 
     if ($('.wrapper')[0].scrollTop > 0) 
     if ($('.scroll-wrapper')[0].scrollTop > 0) 
    }

出典

2017-06-26 vincentf

これは本当のCSS .... jkではないことを願っています。あなたもあなたのHTMLを共有できますか？ –

更新された私のHTML – vincentf

EDIT

は、あなたの問題は、実際にあちこち蒸し表示されますhtmlおよびhtml bodyは、overflow: scrollを有する。

これらのCSSルールのいずれかを削除して、最初の問題がまだ解決されているかどうかを確認してください。

html { 
    height: 100%; 
    /* overflow: auto; */ 

    body { 
     height: 100%; 
     overflow: auto; 

     /* ... */ 

    } 
}

また、ラッパーではなくドキュメントのスクロールを確認するには、JavaScriptを変更する必要があります。

$(document).scroll(function() { 
    console.log(document.body.scrollTop) 
    if (document.body.scrollTop > 0) { 
     // Perform Action 
    } 
})

希望が問題を解決します。

出典

2017-06-27 00:56:32

ありがとうございました。何らかの理由で、htmlとbodyの両方に 'height：100％'と 'overflow：auto'を追加する必要があります。私は 'document.body.scrollTop'を試みましたが、それでもまだ0を返します。 – vincentf

ScrollY/scrollTopスプライトはhtmlと体の高さが100％

答えて

関連する問題