사이트 관리
Progress bar 추가
페이지 정보
작성자
WilliamCho쪽지보내기
메일보내기
홈페이지
자기소개
아이디로 검색
전체게시물
댓글 1건
조회 29회
작성일 25-06-20 13:07
본문
AI 세상이 좋긴 좋군요.... 코딩 암것도 모르는 사람도 필요한거 물어보면서 하니 그냥 추가가 됩니다.
각 게시판의 View.php 파일에 들어가서 '게시글 읽어오기 시작' 바로 다음이나 <body> 최 상단에
<!-- HTML (read.skin.php 상단) -->
<div id="readProgressContainer">
<div id="readProgressBar"></div>
</div>
<!-- CSS -->
<style>
#readProgressContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0, 0, 0, 0.05);
z-index: 9999;
}
#readProgressBar {
width: 0%;
height: 100%;
background-color: #3498db;
transition: width 0.1s ease-out;
}
</style>
이걸 집어넣고, 같은 파일 제일 마지막에
<!-- JavaScript -->
<script>
document.addEventListener('scroll', function () {
const content = document.querySelector('#bo_v_con');
if (!content) return;
const contentTop = content.offsetTop;
const contentHeight = content.offsetHeight;
const windowHeight = window.innerHeight;
const scrollTop = window.scrollY;
if (scrollTop < contentTop) {
document.getElementById('readProgressBar').style.width = '0%';
return;
}
const scrolledInContent = scrollTop + windowHeight - contentTop;
const maxScrollable = contentHeight;
const percent = Math.min(100, Math.max(0, (scrolledInContent / maxScrollable) * 100));
document.getElementById('readProgressBar').style.width = percent + '%';
});
</script>
이렇게 집어넣으면 본문 스크롤에 따라 진행바가 생깁니다.
---- 집은 장소가 아니라 사람이다. 먹고 자고 떠들고 머무는 물리적 장소가 아니라, 함께 먹고 자고 떠드는 사람들이 있어야 비로소 정의 내릴 수 있는 어떤 것이다.
WilliamCho님의 댓글
진행바 시작을 제목부터, 그리고 댓글영역을 포함해서 진행바를 만들고 싶으면
<script>
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('scroll', function () {
const title = document.querySelector('.contentTitle');
const content = document.querySelector('#bo_v');
const progressBar = document.getElementById('readProgressBar');
if (!title || !content || !progressBar) {
console.warn("요소를 찾지 못했습니다", { title, content, progressBar });
return;
}
const top = Math.min(title.offsetTop, content.offsetTop);
const bottom = Math.max(
title.offsetTop + title.offsetHeight,
content.offsetTop + content.offsetHeight
);
const totalHeight = bottom - top;
const windowHeight = window.innerHeight;
const scrollTop = window.scrollY;
const scrolled = scrollTop + windowHeight - top;
let percent = (scrolled / totalHeight) * 100;
percent = Math.min(100, Math.max(0, percent));
progressBar.style.width = percent + '%';
});
});
</script>
이렇게 바꿔주면 된다