javascript scroll event 제어

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 `overflow-y: hidden` 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 `scroll`, `mousewheel`, `touchmove` 등의 이벤트를 걸어 `e.preventDefulat()`로 이벤트를 막아볼 수 있겠지만, `mousewheel` 이벤트와 같이 스크롤과 관련 된 이벤트는 기본적으로 `passive`로 처리되어 있어 추가 옵션을 설정 할 수 없다. 아래와 같은 오류 발생[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. ..

2024.07.03

스크롤 방향에 따른 네비게이션 보이기, 감추기

HTML Logo 글로벌 네비게이션 menu1 menu2 menu3 menu4 menu5 CSS /* header */ header{position:fixed; left: 0; top: 0; width: 100%; z-index:99; background:none; transition:top .3s, background .3s;} header::after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; background:linear-gradient(90deg, rgba(0,198,255,1) 55%, rgba(8,228,168,1) 100%); opacity: 0; transi..

2022.06.02

스크롤시 엘리먼트에 애니메이션 추가하기

HTML 스크롤 시 애니메이션 추가 CSS @keyframes animation-active { 0%{opacity: 0; position:relative; top:50px;} 100%{opacity: 1; position:relative; top:0;} } .animation{opacity: 0;} .animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;} JS $( function(){ const Elements = $('.animation'); function scrollSize(){ const scrollTop = $(document).scrollTop(); // 스크롤TOP 값 const windowH =..

2022.05.20

인터렉티브 웹 4 - z축 원근감

box1 ~ box5는 실제로는 크기가 같지만, z축을 이용해 원근감을 준다. HTML Home Info About Community Contact Player 1 Player 2 Player 3 Player 4 Player 5 Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips..

2022.03.16

영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11

jQuery scroll 스크롤 끝을 확인하는 방법

브라우저 창 끝 이벤트 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()) { alert('End of Window'); } }); DIV 끝 이벤트 $("#inside").scroll( function() { var elem = $("#inside"); if ( elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { alert("End of Yellow"); } });

2021.12.21