스크롤 프로그레스바 넣기(IE문제 수정 2019-03-28 15:22) 정보
스크롤 프로그레스바 넣기(IE문제 수정 2019-03-28 15:22)관련링크
http://vorfeed.dothome.co.kr/
233회 연결
본문
pc나 모바일로 다음 뉴스를 보실때
스크롤을 내리면 상단에 작은 프로그레스바가 해당 문서의 어디를 보고 있는지 프로그레스바로 알려주는 걸 보여주는 소스입니다.
그누보드 베이직 테마 기준
head.php
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<!--상단시작 {-->
부분 사이에
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<div style="width:0%;height:3px;background:#1f49ba;position:fixed;z-index:3000" id="progressBar">
</div>
<!--상단시작 {-->
해당코드 삽입
그리고 임의의 위치에
<script>
$(function(){
$(window).scroll(function(){
var progress = ScrollporgressBar();
$('#progressBar').css("width",progress+'%');
});
function ScrollporgressBar(){
var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;
return (window.scrollY / maxY) * 100;
}
})
</script>
엄밀히 따지면, 그누보드 관련 팁은 아니지만 세로 스크롤이 긴 웹문서에는 유용하게 사용할 수 있을거라 생각됩니다
링크의 홈페이지에 가서 어떤식으로 동작하는지 확인해보세요
2019-03-28 15:22 추가내용
익스에서 동작 안된다는 내용을 받고 수정합니다.
windows.scrollY가 익스에선 지원되지 않습니다.
구형 IE브라우저에서 지원되는 함수로 변경
var scrollY = window.scrollY || document.documentElement.scrollTop;
function ScrollporgressBar(){
var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollY = window.scrollY || document.documentElement.scrollTop;
return (scrollY / maxY) * 100;
}
ScrollporgressBar() 함수부분을 위와같이 바꿔주세요
!-->!-->!-->!-->
추천
9
9
댓글 9개
재밋네요 ㅎ
게시글에도 유용하지만, 특히나 쇼핑몰 상품페이지에서 사용하면 만족도가 더 높아질 듯 합니다. 좋은 정보 감사합니다^^
오... 한번 분석해보고 잘 쓰겠습니다~!!
고맙습니다. 짧고 굵은 팁이네요 :)
완전 좋네요..궁금했던건데 정말 너무 감사욤..
멋지네요!
적용했는데 잘 됩니다.
적용했는데 잘 됩니다.
임의의 위치에 스크립트를 넣으라는 것은...
head.php 파일내 임의의 위치를 말하시나요?
아니면 어디를 말하는 건가요?
조금더 구체적으로 알려주시면 감사하겠습니다.
저는 head.php 내 넣었는데 안나오네요...ㅠㅠ
head.php 파일내 임의의 위치를 말하시나요?
아니면 어디를 말하는 건가요?
조금더 구체적으로 알려주시면 감사하겠습니다.
저는 head.php 내 넣었는데 안나오네요...ㅠㅠ
그런데 인터넷 익스플로러에서는 작동 안합니다.
방법이 없나요..
방법이 없나요..
저도 익스플로러에서는 안되서 찾아봤네요~
https://thinking1.tistory.com/777
https://thinking1.tistory.com/777