기본 콘텐츠로 건너뛰기

현재 보고 있는 컨텐츠의 위치를 화면 맨 위에 progress 스타일로 알려주기 - javascript, html

이미지
작성자:

스크롤바가 아닌 progress bar 스타일로 현재 컨텐츠의 위치 표시하기

Progress bar로 컨텐츠의 위치 표시

<template>
  <div class="progress_line">
    <input type="range" min="0" step="0.1" max="100" :value="info.val">
  </div>
</template>

<script setup>
import { ref } from "vue"

//
const info = ref({
  val: 0,//
})

// @input="checkValue" @mousedown="mDown" @mouseup="mUp"
// progress bar 에서 클릭드래그 시 컨텐츠 영역이 현재 progress 위치에 맞게 같이 이동되게 할 때 추가
// const mDown = () => {
//   document.documentElement.classList.add("scrollbehavior_no");
// }
// const mUp = () => {
//   document.documentElement.classList.remove("scrollbehavior_no");
// }
// const checkValue = (e) => {
//   info.value.val = e.target.value;
//   let scrolheight = document.documentElement.scrollHeight;
//   let scrolly = Math.floor((scrolheight - window.innerHeight) * info.value.val / 100)
//   window.scrollTo(0, scrolly);
// }

//
const progressScroll = (e) => {
  let scroltop = e.target.scrollingElement.scrollTop;
  let scrolheight = e.target.scrollingElement.scrollHeight;
  let scrollPosition = Number((scroltop / (scrolheight - window.innerHeight) * 100).toFixed(2));
  info.value.val = scrollPosition;
  // console.log("-- : ", scroltop, (scrolheight + window.innerHeight), scrolheight, scrollPosition);
}

//
window.addEventListener("scroll", progressScroll);
</script>

style

.progress_line {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 72rem;
  font-size: 0;
  z-index: 110;
  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-color: $c_pink;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
    }
    &::-webkit-slider-thumb {
      width: 1px;
      height: 0.3rem;
      -webkit-appearance: none;
      background: $c_red;
      cursor: pointer;
      box-shadow: -100vw 0 0 100vw $c_red;
    }
    &:focus {
      outline: none;
    }
    // &::-webkit-slider-runnable-track {
    // height: 0.5rem;
    // -webkit-appearance: none;
    // color: #13bba4;
    // margin-top: 0;
    // }
    // &::-ms-track {
    //   width: 100%;
    //   color: transparent;
    //   background: transparent;
    //   border-color: transparent;
    //   cursor: pointer;
    // }
    // &::-moz-range-track {
    //   width: 100%;
    //   height: 0.5rem;
    //   background: #999;
    //   border: none;
    //   border-radius: 3px;
    // }
    // &::-moz-range-thumb {
    //   height: 0.5rem;
    //   width: 1px;
    //   border-radius: 50%;
    //   background: #fff;
    //   border: 1px solid #ddd;
    //   margin-top: -4px;
    // }
    // &::-moz-range-progress {
    //   background-color: #008489;
    // }
  }
}

사용 시(App.vue 등)

<template>
  <Progressbar />
  <RouterView />
</template>

<script setup>
import Progressbar from "./views/Progressbar.vue";
...
</script>

세로로 기본으로 보여지는 스크롤바 대신에 화면 맨 위에 가로로 progress 스타일로 현재 컨텐츠의 위치가 표시되는 효과가 필요할 경우 사용할 수 있다.


끝.



분류 :