CSS_JS

브라우저 스크롤 반응 스크롤바

creat1ve 2017. 5. 15. 16:13
반응형

<script>

(function() {

  function Scrollify() {

    var line = document.querySelector(".scroll-line"),

        scrollpos = window.pageYOffset, 

        docheight = document.body.clientHeight, 

        winheight = window.outerHeight,

        scrolled  = ( scrollpos/( docheight-winheight) )*100;

      

     line.style.width = (scrolled + '%');

  }

  window.addEventListener("scroll", Scrollify);

})();

</script>

<style>.scroll-line {   height: 3px;   background: #ea1e63;   width: 0%;   clear: both; } </style>

반응형