CATEGORIES
웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?마우스의 휠 버튼을 사용하는 경우 키보드의 커서키를 사용하는 방법 스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?# 스크롤의 이동을 막는 것이 필요한 경우언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서
Last Modified : 2017-12-11 07:34:19
css를 사용하여 브라우저 스크롤바의 스타일을 변경하는 방법에 대하여 알아봅니다. 커스텀 스크롤바라고도 부릅니다.# CSS를 사용하여 브라우저 스크롤바를 바꾸는 방법은?먼저 스크롤바의 스타일을 바꾸기 전에 꼭 알아야 할 사항이 있습니다.."css를 사용하여 브라우저 스크롤바 스타일을 바꿀 수는 있으나 매우 제한적이다."생각해보면 스크롤바는 웹콘텐츠가 아닌 브라우저 내부 인터페이스이므로 일반적인 css 사용과의 차이가 이해가 됩니다. 그런 이유로 크롬 기반의 브라우저 이 외에는 최소 수준에서 바꾸는 것이 가능합니다.@ 참고. 만약 모든 브라우저가 지원하는 완성도 높은 스크롤바를 구현하고 싶다면?일반적으로 이런 경우 css만 사용해서는 어렵습니다. 대부분 브라우저 스크롤바를 숨기고 대체할 수 있는 별도의 스크
Last Modified : 2020-05-15 10:59:05자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은# 자바스크립트 원하는 위치로 스크롤 이동하는 방법만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.<input type="text" id="nickname" />i. 하이퍼링크에 #id를 사용하기만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과
Last Modified : 2019-08-12 22:18:45
자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 들을 수 있습니다. 아래에서는 무한스크롤이란 무엇이고 자바스크립트 라이브러리 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 알아보겠습니다. 먼저 무한스크롤이란 무엇일가요?! 자바스크립트의 무한스크롤(Infinite Scroll)이란?무한 스크롤이란 사용자 인터렉션(Interaction)의 하나로 방문자의 스크롤을 브라우저의 끝으로 내릴 경우 새로운 콘텐츠가 계속해서 생겨나 끊임없이 스크롤을 해야하는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 계속 내리면서 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.무한스크롤은 계속해서 새로운 콘텐츠를 제공함@ 무한 스크롤의
Last Modified : 2020-07-07 23:42:15
페이지를 최하단 또는 최상단으로 이동시키기 위한 버튼을 보셨나요? 아래 스크린샷의 우측하단을 봐주세요.(그림) 우측 하단의 top 버튼이 바로 스크롤 이동 버튼임 보시는 것처럼 특히 모바일 페이지의 경우 스크롤을 한번에 최상단에까지 올리기 위해 버튼을 보실 수가 있죠. 이처럼 스크롤을 이동하기 위한 메소드로 animate를 사용할 수 있습니다. # 자바스크립트 - 페이지 스크롤 위치 이동하는 방법animate는 참 다양한 기능을 구현하는데 스크롤 이동 역시 그 중 하나입니다. $('html, body').animate({scrollTop: '0'}, 1000); $('html, body').scrollTop(0); 이 스크롤을 이동시키는 방법은 위와 같이 두가지 방법이 있습니다. 하나는 animate()
Last Modified : 2019-08-06 22:00:13자바스크립트를 사용하여 현재의 스크롤바 위치값을 가져오는 방법입니다. 어떻게 하면 스크롤바 값을 가져오는지 아래에서 알아봅니다.# 자바스크립트에서 스크롤 위치 값 가져오기스크롤바의 위치를 가져오는 방법은 몇 가지가 존재합니다. 그 중 몇 가지를 알아보면 다음과 같습니다.window.scrollYdocument.scrollingElement.scrollTopdocument.documentElement.scrollTopdocument.querySelector('html').scrollTop위 방법들 모두 현재 스크롤바의 위치를 숫자로 반환합니다. 다만 위의 두 가지 방법은 IE에서 동작하지 않습니다.// IE not supportswindow.scrollY;document.scrollingElement.scro
Last Modified : 2020-03-19 17:56:25
textarea의 경우 height: auto; 속성값을 사용하여 자동으로 높이 조절이 되지 않습니다. 그래서 만약 글이 길어질 경우 스크롤을 내려야만 하는 불편함이 생기게됩니다. 그렇다면 글이 길면 자동으로 길어지는 textarea 태그를 구현하면 사용자 입장에서 매우 편리할 것입니다. 아래는 이를 구현하기 위한 방법입니다.# textarea 자동으로 높이 조절하기자바스크립트를 사용해 자동으로 height가 조절되는 코드를 구현하려면 가장 먼저 현재 textarea 태그가 가진 높이를 알아야만 합니다. 이때 주의할 사항으로 어떤 height값을 알아야하는지가 매우 중요합니다.요소의 높이(Height)는 여러가지 값이 존재하면 일반적으로 innerHeight, outerHeight 등이 있습니다. 이들은 내
Last Modified : 2018-03-05 06:06:55제이쿼리를 사용하여 현재 페이지의 스크롤 전체에 해당하는 높이 값을 알려면 어떻게 알 알 수 있을까요? 아래에서 자세히 알아봅니다.# 제이쿼리를 사용한 스크롤에 해당하는 높이 값순수 자바스크립트에서 사용되는 scrollHeight 프로퍼티는 특정요소에 사용시 scroll되어 나타나는 부분까지 높이를 반환합니다. 제이쿼리를 사용하여 scrollHeight 값을 가져오려면 어떻게 해야할까요? 방법은 아래와 같습니다.$(ele).prop('scrollHeight'); 보시는 것처럼 prop() 메소드를 사용하면 그 요소가 가진 scrollHeight 값도 가져올 수 있습니다. 그럼 자세한 예제는 아래에서 참고하시기 바랍니다.# scrollHeight 예제보기아래는 textarea 태그의 스크롤 높이를 구하려고합니
Last Modified : 2018-01-02 00:21:55
웹페이지 CSS를 사용하여 스크롤을 이동하지 않도록 막는 다양한 방법에 대하여 알아보려고 합니다. 특히 모바일 환경에서의 이슈도 함께 알아봅니다.# 웹사이트 스크롤을 이동하지 않도록 고정하기콘텐츠의 길이가 길면 상하 스크롤이 나타나겠죠. 만약 이런 스크롤이 안보이도록... 이동하지 않도록 하려면 어떻게 할 수 있을까요? 그 전에 스크롤 이동을 언제 왜 막아야할까요? 가장 많이 사용되는 이유입니다.1. 모달, 팝업 등 을 보여주는 경우 뒤 화면이 이동하지 않도록 하기2. 로딩등의 이유로 딤드(dimmed) 처리된 경우방법은 아래와 같이 세 가지가 존재합니다. 하나씩 알아봅니다. ! overflow: hidden을 사용하는 방법이 방법도 css만 사용하므로 매우 간편하고 효과적인 방법입니다. 동일하게 스크롤 영
Last Modified : 2020-04-04 17:34:41
자바스크립트에서 제이쿼리을 사용하는 경우 스크롤의 좌우 위치를 이동하는 방법입니다. 어떻게 하면 좌우로 스크롤이 이동할 수 있는지 아래에서 알아봅니다.# 제이쿼리 스크롤 좌우 이동하기, scrollLeft()제이쿼리는 스크롤 관련 메소드를 제공합니다. 그 중에서 좌우 이동 방법으로 scrollLeft() 메소드를 사용할 수 있습니다. 아래는 간단한 문법입니다.$(element).scrollLeft(value)선택 가능한 값은 좌측을 기준으로 몇 픽셀에 위치할 것인지 value를 입력하면 됩니다. 만약 value가 없는 경우 현재의 스크롤 값을 가져와 출력하게됩니다. 현재 좌우 스크롤바 값을 구하는데도 사용할 수 있습니다.그럼 간단한 예제를 만들어보겠습니다.! scrollLeft() 예제보기먼저 스크롤이 가능
Last Modified : 2019-08-23 07:57:02동적인 화면을 구성하기 위해서는 브라우저의 크기와 현재값을 알아둘 필요가 있습니다. 현재의 디바이스가 가지는 최대 width 너비의 크기등을 말이죠. 얻을 수 있는 값들 중 크기 순으로 정렬하자면 아래와 같습니다clientHeight > offsetHeight > scrollHeight위 순서대로의 크기를 가집니다. 좀 더 자세하게 알아보도록하겠습니다.1. clientheight이 값은 스크롤바의 공간을 제외한 부분입니다.2. offsetHeight스크롤바가 나타나는 부분까지의 길이입니다.3. scrollHeight는 스크롤이 안 보이는 영역까지의 길이입니다.<script type="text/javascript">document.body.offsetHeight;</script>현재 화면에서 실제로 사용가능한
Last Modified : 2015-11-15 22:58:10
제이쿼리를 사용하여 화면 상단으로 화면, 스크롤이 이동하는 버튼을 만들어보겠습니다.웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 Top으로 이동하는 버튼을 구현해보려합니다.# 최상단으로 이동하는 버튼 만들기방문자가 페이지 어디 위치에서든 클릭하면 최상단 위치로 스크롤이 이동하게됩니다. 이때 화면이 한번에 전환되거나 아니면 애니메이션으로 부드럽게 이동할 수 있겠죠. 아무래도 애니메이션을 구현하는 방법이 더 좋을 것 같습니다.! jquery animate() 메서드를 사용하여 구현a
Last Modified : 2019-08-06 22:00:16
자바스크립트에서 현재의 스크롤 위치를 원하는 엘리먼트 및 위치로 이동하는 방법을 순수 자바스크립트를 사용하여 라이브러리 없이 구현해보고자 합니다. 아래에서 자세히 알아보세요.# 자바스크립트 스크롤 애니메이션 구현하기먼저 스크롤을 이동하는 경우는 언제 필요할까요? 가장 많이 사용되는 경우는 내부 링크로 이동하는 경우가 되겠습니다. 즉 버튼을 클릭시 원하는 내부 엘리먼트로 이동할 경우죠.<a href="#target">바로가기</a><div id="target">Hi Webisfree.com</div>일반적으로 #id를 사용하여 이동하는 방법이 많이 쓰입니다. 일단 별도의 자바스크립트가 필요없죠. 다만 애니메이션 효과가 없이 즉시 스크롤이 해당 위치로 움직인다는 단점이 존재합니다.그래서 애니메이션이 있는 스크롤
Last Modified : 2020-03-23 10:14:02
스크롤 이동시 오직 css만 사용하여 스크롤 애니메이션을 구현할 수 있는 scroll-behavior에 대하여 알아봅니다.# CSS scroll-behavior 속성웹페이지에서 스크롤을 원하는 위치로 이동하는 방법으로 자바스크립트를 사용하거나 href="#id"의 방법을 사용합니다. 이때 스크롤이 바로 이동하지 않고 부드럽게 이동하게 하려면 어떻게 할까요? 제이쿼리의 메소드를 사용하거나 아니면 타이머 함수등을 사용할 수 있습니다.하지만 더 간단한 방법이 필요한 경우 css를 사용할 수 있는데요. 바로 scroll-behavior 속성입니다. 이 css 속성은 스크롤 이동을 자연스럽게 바꿀 수 있는 값으로 설정할 수 있죠.scroll-behavior: [ auto | inherit | smooth ]위와 같이
Last Modified : 2020-02-12 16:33:27
자바스크립트에서 마우스의 스크롤 이벤트를 사용하는 경우 만약 마우스 스크롤의 방향을 알려면 어떻게 알 수 있는지 알아봅니다.# 자바스크립트 마우스 스크롤 방향 알기마우스 스크롤을 방향을 알기 위해서 가장 많이 사용되는 방법이 바로 스크롤 위치의 이전 값을 전역 변수로 저장하는 방법입니다.다시 말하면 현재 스크롤 위치와 직전 스크롤 위치를 비교해 값이 커지고 있는지 아니면 작아지고 있는지 확인하여 방향을 알 수 있습니다. 이 값은 양수(+), 음수(-) 또는 0이 나타날 것입니다. 순서대로 나타내면...1. 스크롤 이벤트가 발생하면 이 전 값을 확인2. 이 전 값보다 커지면 스크롤이 아래 방향임3. 이 전 값보다 작아지면 스크롤이 위 방향임4. 방향을 확인 후 현재 스크롤 값을 계속 업데이트위 순서대로 입니다
Last Modified : 2020-10-29 19:31:21스크롤바를 지정 및 삭제(숨기기, 안보이게 하기)하는 방법입니다. 스크립트를 사용해 반응형 웹을 만들때 많이 사용됩니다. 참고로 IE 8 이하에서는 overflow가 안되니 스크립트를 쓰거나 position을 relative로 바꿔주는 등 다른 우회 방법을 찾으셔야 합니다^^Ex)- 문서태그의 경우overflow-x: none; // 좌우 스크롤바 숨기기overflow-y: none; // 상하 스크롤바 숨기기overflow: auto; // 스크롤바 생성- iframe의 스크롤인 경우scrolling: no;
Last Modified : 2015-05-14 10:46:44만약 현재 브라우저 화면에서 스크롤 끝으로 이동하려면 어떻게할까요?브라우저 끝으로 이동하는 방법으로 scrollIntoView()를 사용할 수 있습니다. 이를 사용하려면 아래처럼 실행합니다.element.scrollIntoView(true or false)scrollIntoView는 특정 요소의 위치로 바로 이동시켜주는 자바스크립트 함수입니다.만약 문서의 가장 끝으로 이동하려면? body 요소를 기준으로 이동할 수 있을 것입니다.document.body.scrollIntoView(false)위 코드를 실행할 경우 화면에서 스크롤 가장 하단으로 이동합니다.
Last Modified : 2018-03-12 07:01:20자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 AJAX 코드가 한 번이 아닌 여러 번 발생할 수 있습니다...그렇다면 스크롤 할 경우 여러번이 아닌 한 번만 발생하는 방법 무엇일까요?scrollStart;clearTimeout(scrollStart)clearTimeout을 통해 이벤트 발생을 제어합니다.
Last Modified : 2019-01-08 08:49:57자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('wheel', function() { ...});적은 이벤트를 발생함
Last Modified : 2019-01-08 09:50:29
웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 이동하는 방법은 몇 가지가 존재합니다. 위 방법을 알아보기에 앞서 예전 또는 기존의 방법들을 먼저 알아봅니다.1. 태그에 id를 추가하여 url에 # 기호를 사용하는 방법; 엘리먼트에 id값을 추가한 뒤 url에 #(hash) 기호를 사용하면 해당 위치로 바로 이동이 가능합니다. 다만 부드럽게(smooth) 이동하려면 추가로 css를 사용하여야 합니다.2. 해당 엘리먼트의 스크롤 위치를 구한 후 해당 위치로 이동시키는 방법이 방법은 scrollIntoView() 이 전에 가장 많이 사용된 방법입니다. scro
Last Modified : 2021-08-19 10:31:01