자바스크립트를 사용하여 현재의 스크롤바 위치값을 가져오는 방법입니다.스크롤바의 위치를 가져오는 방법으로 아래와 같이 window객체의 scrollY 프로퍼티를 사용합니다.window.scrollY현재의 스크롤바 위치를 숫자로 반환합니다. 만약 현재 스크롤바가 제일 상단이라면 0을 반환할 것입니다.var scrollPosition = window.scrollY;console.log(scrollPosition);0 // 맨 위 상단인 경우 0 반환! IE에서 스크롤바 위치값 가져오기IE 브라우저의 경우 window.scrollY의 프로퍼티가 존재하지 않습니다. 이 경우 document 하위의 documentElement를 사용하며 scrollTop을 사용해야합니다.document.documentElement.scrollTop;그렇다면 실제 자바스크립트에서는 어떻게 사용할까요? 크로스브라우징을 위해서 아래처럼 코드를 적용할 수 있을 것입니다.var _scrollTop = window.
2019-03-08 02:13:46css를 사용하여 브라우저 스크롤바의 스타일을 변경하는 방법에 대하여 알아봅니다. 커스텀 스크롤바라고도 부릅니다.# 브라우저 스크롤바를 바꾸는 방법은?먼저 스크롤바의 스타일을 바꾸기 전에 알아야할 사항이 몇 가지 있습니다. 하나는 스크롤바에 css를 적용할 수 있다는 점이고 다른 하나는 가능하지만 상당히 제한적이라는 부분입니다. 어찌보면 스크롤바는 웹콘텐츠가 아닌 브라우저의 인터페이스이므로 제어하는 방식이 css와 다른 점이 이해가 됩니다. 그렇다면 각 브라우저에 스크롤 스타일을 바꾸는 방법을 알아봅니다.! 크롬, 사파리 등의 웹킷 엔진에서 변경할 경우의 방법먼저 크롬, 사파리 계열의 웹킷엔진입니다. 아래처럼 여러가지 css를 사용할 수 있습니다.::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-button:start::-webkit-scrollbar-button:end::-webkit-scrollbar-button
2019-01-08 09:06:28제이쿼리를 사용하여 화면 상단으로 화면, 스크롤이 이동하는 버튼을 만들어보겠습니다.웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 Top으로 이동하는 버튼을 구현해보려합니다.# 최상단으로 이동하는 버튼 만들기방문자가 페이지 어디 위치에서든 클릭하면 최상단 위치로 스크롤이 이동하게됩니다. 이때 화면이 한번에 전환되거나 아니면 애니메이션으로 부드럽게 이동할 수 있겠죠. 아무래도 애니메이션을 구현하는 방법이 더 좋을 것 같습니다.! jquery animate() 메서드를 사용하여 구현animate() 다양한 애니메이선을 간단하게 구현할 수 있는 메서드로 스크롤 이동, 전환을 선택할 수 있습니다. 그럼 아래에서는 버튼을 하나 만들고 해당 버튼을 클릭시 최상단으로
2018-01-10 04:16:51자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('wheel', function() { ...});적은 이벤트를 발생함
2017-04-27 02:49:11자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 AJAX 코드가 한 번이 아닌 여러 번 발생할 수 있습니다...그렇다면 스크롤 할 경우 여러번이 아닌 한 번만 발생하는 방법 무엇일까요?scrollStart;clearTimeout(scrollStart)clearTimeout을 통해 이벤트 발생을 제어합니다.
2017-04-07 11:19:13만약 현재 브라우저 화면에서 스크롤 끝으로 이동하려면 어떻게할까요?브라우저 끝으로 이동하는 방법으로 scrollIntoView()를 사용할 수 있습니다. 이를 사용하려면 아래처럼 실행합니다.element.scrollIntoView(true or false)scrollIntoView는 특정 요소의 위치로 바로 이동시켜주는 자바스크립트 함수입니다.만약 문서의 가장 끝으로 이동하려면? body 요소를 기준으로 이동할 수 있을 것입니다.document.body.scrollIntoView(false)위 코드를 실행할 경우 화면에서 스크롤 가장 하단으로 이동합니다.
2017-04-06 05:36:53자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은# 자바스크립트 원하는 위치로 스크롤 이동하는 방법만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.<input type="text" id="nickname" />i. 하이퍼링크에 #id를 사용하기만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과 같은 방법으로 링크를 만들어 이동시킬 수 있습니다.<a href="#nickname">Write your nickname</span>ii. focus() 이벤트를 사용하기아래 방법
2017-03-30 17:32:09제이쿼리를 사용하여 현재 페이지의 스크롤 전체에 해당하는 높이 값을 알려면 어떻게 알 알 수 있을까요? 아래에서 자세히 알아봅니다.# 제이쿼리를 사용한 스크롤에 해당하는 높이 값순수 자바스크립트에서 사용되는 scrollHeight 프로퍼티는 특정요소에 사용시 scroll되어 나타나는 부분까지 높이를 반환합니다. 제이쿼리를 사용하여 scrollHeight 값을 가져오려면 어떻게 해야할까요? 방법은 아래와 같습니다.$(ele).prop('scrollHeight'); 보시는 것처럼 prop() 메소드를 사용하면 그 요소가 가진 scrollHeight 값도 가져올 수 있습니다. 그럼 자세한 예제는 아래에서 참고하시기 바랍니다.# scrollHeight 예제보기아래는 textarea 태그의 스크롤 높이를 구하려고합니다. 정확한 스크롤 높이값을 알기위해서 아래와 같이 코드를 수행합니다.@ scroll.html<textarea id="ele"> a bc def ghij klmno</te
2015-11-03 23:17:43textarea의 경우 height: auto; 속성값을 사용하여 자동으로 높이 조절이 되지 않습니다. 그래서 만약 글이 길어질 경우 스크롤을 내려야만 하는 불편함이 생기게됩니다. 그렇다면 글이 길면 자동으로 길어지는 textarea 태그를 구현하면 사용자 입장에서 매우 편리할 것입니다. 아래는 이를 구현하기 위한 방법입니다.# textarea 자동으로 높이 조절하기자바스크립트를 사용해 자동으로 height가 조절되는 코드를 구현하려면 가장 먼저 현재 textarea 태그가 가진 높이를 알아야만 합니다. 이때 주의할 사항으로 어떤 height값을 알아야하는지가 매우 중요합니다.요소의 높이(Height)는 여러가지 값이 존재하면 일반적으로 innerHeight, outerHeight 등이 있습니다. 이들은 내부 또는 외부 크기를 반환합니다. 하지만 textarea 태그는 높이는 동일하고 내부에 스크롤이 생기기 때문에 스크롤 영역을 포함하는 높이를 알아야 합니다. 이때 prop() 제
2015-11-03 23:02:17웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?마우스의 휠 버튼을 사용하는 경우 키보드의 커서키를 사용하는 방법 스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?# 스크롤의 이동을 막는 것이 필요한 경우언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서 빠른 스크롤 이동에 의하여 의도한 콘텐츠를 다 못보여주는 경우도 생각해볼 수 있습니다. 이런 경우는 예를 들면... 페이지 스크롤에 따라 화면이 동적으로 변하는 웹사이트의 경우가
2015-01-13 17:45:24페이지를 최하단 또는 최상단으로 이동시키기 위한 버튼을 보셨나요? 아래 스크린샷의 우측하단을 봐주세요.(그림) 우측 하단의 top 버튼이 바로 스크롤 이동 버튼임 보시는 것처럼 특히 모바일 페이지의 경우 스크롤을 한번에 최상단에까지 올리기 위해 버튼을 보실 수가 있죠. 이처럼 스크롤을 이동하기 위한 메소드로 animate를 사용할 수 있습니다. # 자바스크립트 - 페이지 스크롤 위치 이동하는 방법animate는 참 다양한 기능을 구현하는데 스크롤 이동 역시 그 중 하나입니다. $('html, body').animate({scrollTop: '0'}, 1000); $('html, body').scrollTop(0); 이 스크롤을 이동시키는 방법은 위와 같이 두가지 방법이 있습니다. 하나는 animate() 메소드의 scrollTop 속성을 사용해 스크롤 이동을 부드럽게(자연스럽게) 상단 또는 하단의 원하는 위치로 이동하게 만드는 방법이 있구요... 다른 하나는 scrollTop()
2014-11-26 17:58:25자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 자주 들을 수 있습니다. 그럼 무한스크롤이란 무엇이고 자바스크립트 라이브러리인 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 자세하게 알아보겠습니다. 일단 무한스크롤이란 무엇일가요?! 자바스크립트의 무한스크롤(Infinite Scroll)이란? 용어알기무한 스크롤이란 화면 인터렉션(Interaction)의 하나로 사용자 행동에 의해 만약 웹페이지 화면에서 스크롤을 브라우저의 끝으로 내리게되면 새로운 콘텐츠가 계속해서 생겨나는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 내리면 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.이런 화면 인터렉션은 사용자가 새로운 콘텐츠를 더 볼 수 있도록 편리한 UI 인터페이스를 제공합니다. 만약 이 방식이 아니라면 사용자는 페이지를 전환할 수 있는 아이콘 등을 클릭하여 다른 콘텐츠... 즉 2페이지, 3페
2014-11-25 00:05:55동적인 화면을 구성하기 위해서는 브라우저의 크기와 현재값을 알아둘 필요가 있습니다. 현재의 디바이스가 가지는 최대 width 너비의 크기등을 말이죠. 얻을 수 있는 값들 중 크기 순으로 정렬하자면 아래와 같습니다clientHeight > offsetHeight > scrollHeight위 순서대로의 크기를 가집니다. 좀 더 자세하게 알아보도록하겠습니다.1. clientheight이 값은 스크롤바의 공간을 제외한 부분입니다.2. offsetHeight스크롤바가 나타나는 부분까지의 길이입니다.3. scrollHeight는 스크롤이 안 보이는 영역까지의 길이입니다.<script type="text/javascript">document.body.offsetHeight;</script>현재 화면에서 실제로 사용가능한 최대치의 폭 및 높이를 반환합니다.window.screen.availWidthwindow.screen.availHeight현재 브라우저의 전체 크기 값을 반환함window.out
2014-01-30 14:06:03스크롤바를 지정 및 삭제(숨기기, 안보이게 하기)하는 방법입니다. 스크립트를 사용해 반응형 웹을 만들때 많이 사용됩니다. 참고로 IE 8 이하에서는 overflow가 안되니 스크립트를 쓰거나 position을 relative로 바꿔주는 등 다른 우회 방법을 찾으셔야 합니다^^Ex)- 문서태그의 경우overflow-x: none; // 좌우 스크롤바 숨기기overflow-y: none; // 상하 스크롤바 숨기기overflow: auto; // 스크롤바 생성- iframe의 스크롤인 경우scrolling: no;
2014-01-25 13:56:32
