Blogger jQuery 적용 및 자체 스크롤 만들기
오후 1:22 홍다슬
* Blogger 기본 테마 중 '세련' 테마 적용 중에 작성하였다.
항목 중에서 Tap 영역에 overflow: auto; 로 스크롤을 추가하였는데, div태그라 그런지 전체 스크롤과 동시에 움직이는 문제가 발생하였다.
검색해보니 두가지 해결법이 있는데,
mouseenter 이벤트를 이용하여 커서가 div에 진입할때 전체 스크롤를 없애거나(overflow: hidden;)
mousewheel 이벤트를 이용하여 스크립트로 작동하는 자체 스크롤을 만들어주는것.
후자가 더 깔끔해보여서 선택하기로 했다.
좋은지 나쁜지 애매한 점은 스크롤이 눈으로 보이진 않는다.
일단 CSS부분은 overflow: hidden; 으로 바꿔준다.
(이전글 http://bluebead38.blogspot.kr/2017/04/blogger-css.html 참고)
일단 소스는 다음과 같다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
<!-- jQuery Connection -->
</script>
<script>
$(function() {
// column-left-outer class 지정 개체에서 스크롤 액션이 감지될 때
$('.column-left-outer').on('mousewheel DOMMouseScroll', function(e) {
var E = e.originalEvent;
// 스크롤 액션의 변화값 증감에 따라 화면 스크롤 변화
if (E.wheelDelta >= 100) {
this.scrollTop -= 20;
} else if (E.wheelDelta < -100) {
this.scrollTop += 20;
}
return false;
});
});
</script>
이걸 그대로 복사하면 기호를 인식하지 못하고 오류가 난다.
Entity Name으로 전환해주는 작업이 필요하다.
https://mothereff.in/html-entities
여기서 간단하게 전환이 가능하다.
allow named character references in output도 체크해준다.
결과적으로는 아래 소스를 추가하면 된다. (주석도 같이 전환되기 때문에 지저분해서 지웠다.)
붙여넣는 위치는 <head> 내부면 된다. 적당히 </head> 위로 했다.
<b:include data='blog' name='google-analytics'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
<!-- jQuery Connection -->
</script>
<script>
$(function() {
$('.column-left-outer').on('mousewheel DOMMouseScroll', function(e) {
var E = e.originalEvent;
if (E.wheelDelta >= 100) {
this.scrollTop -= 20;
} else if (E.wheelDelta < -100) {
this.scrollTop += 20;
}
return false;
});
});
</script>
</head>
+ 문제점
Firefox에서는 작동하지 않는다.
좀더 자세히 말하면 DOMMouseScroll 까진 인식이 되나 scrollTop에서 문제가 생기는듯하다.
+다음 소스로 수정하면 Firefox에서도 동작한다.
$( '.column-left-outer' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
var E = e.originalEvent;
delta = E.wheelDelta || -E.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
알아보니 detail이라는 값이 Firefox에서만 사용되는 값인데, +, - 만 구분하기 때문에 값을 더 곱함으로써 스크롤처럼 보이도록 하는 것 같다.
참고 사이트 :
http://alik.info/p/65
http://stackoverflow.com/questions/7600454/how-to-prevent-page-scrolling-when-scrolling-a-div-element
http://recoveryman.tistory.com/120
0 개의 댓글:
댓글 쓰기