티스토리 뷰
| Element 속성 | 설명 |
| clientTop | border-top의 값 |
| offsetTop | offsetParent를 기준으로 각각 요소가 아래쪽으로 얼마나 떨어져 있는지를 나타낸다. |
| scrollTop | ‘수직 스크롤 바에 의해 가려져 보이지 않는’ 위쪽 콘텐츠의 높이 |
| 대부분의 기하 프로퍼티는 읽기전용이지만 scrollTop과 scrollLeft와 은 변경이 가능하다. (scrollTop을 0이나 1e9같이 아주 큰 숫자로 설정해 스크롤 바를 최상단이나 최하단으로 옮길 수 있다.) |
|
clientTop
clinetTop = border-top
offsetTop
offsetParent를 기준으로 각각 요소가 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.
[offsetParent의 기준]
- CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소
- <td>나 <th>, 혹은 <table>
- <body>
*offset이란? 요소가 화면에서 차지하는 영역 전체 크기를 나타냅니다.
scrollTop
‘수직 스크롤 바에 의해 가려져 보이지 않는’ 위쪽 콘텐츠의 높이
예제
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clientTop, offsetTop, scrollTop의 차이</title>
<style>
html {
background: #333;
}
.box {
position: absolute;
top: 600px;
left: 400px;
width: 100px;
height: 100px;
background-color: pink;
}
.para {
width: 60vw;
margin: 4rem auto;
color: #fff
}
.overflow {
overflow-y: scroll;
height: 400px;
padding: 1rem;
border: solid pink;
border-width: 2px 4px 6px 8px;
color: #333;
background: #ddd;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
<p class="para item1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<p class="para item2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<p class="para item3 overflow">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<script>
const html_elem = document.documentElement;
const box = document.querySelector('.box');
const item1 = document.querySelector('.item1');
const item2 = document.querySelector('.item2');
const item3 = document.querySelector('.item3');
// clientTop / offsetTop / scrollTop
// 공통점: Element를 선택해서 사용해야 한다.
// clientTop
// clientTop은 border-top의 값이다.
console.group('clientTop');
console.log('HTML의 clientTop => ' + html_elem.clientTop);
console.log('box의 clientTop => ' + box.clientTop);
console.log('item1의 clientTop => ' + item1.clientTop);
console.log('item2의 clientTop => ' + item2.clientTop);
console.log('item3의 clientTop => ' + item3.clientTop);
console.groupEnd('clientTop');
// offsetTop
// offsetTop은 브라우저와 Element의 사이의 간격의 값이다.
console.group('offsetTop');
console.log('HTML의 offsetTop => ' + html_elem.offsetTop);
console.log('box의 offsetTop => ' + box.offsetTop);
console.log('item1의 offsetTop => ' + item1.offsetTop);
console.log('item2의 offsetTop => ' + item2.offsetTop);
console.log('item3의 offsetTop => ' + item3.offsetTop);
console.groupEnd('offsetTop');
// scrollTop
// scrollTop은 Element의 컨텐츠가 화면에서 숨겨진 Top의 값이다.
// 즉, 스크롤바가 화면에서 내려가야 측정이 가능하다.
console.group('scrollTop');
console.log('HTML의 scrollTop => ' + html_elem.scrollTop);
console.log('box의 scrollTop => ' + box.scrollTop);
console.log('item1의 scrollTop => ' + item1.scrollTop); //스크롤이 없기 때문에 측정 불가
console.log('item2의 scrollTop => ' + item2.scrollTop); //스크롤이 없기 때문에 측정 불가
console.log('item3의 scrollTop => ' + item3.scrollTop);
console.groupEnd('scrollTop');
</script>
</body>
</html>[공부 좌표]
'이론 > JS' 카테고리의 다른 글
| [JS] 자료형 변환 (0) | 2021.01.02 |
|---|---|
| [JS] Q. 리터럴과 생성자의 차이는? (0) | 2020.12.31 |
| [JS] setTimeout / setInterval (0) | 2020.12.30 |
| [JS] window.innerHeight / outerHeight (0) | 2020.12.30 |
| [JS] Element.clientHeight / offsetHeight / scrollHeight (0) | 2020.12.30 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- prototype 프로퍼티
- 동치 연산자
- __proto__
- 불일치 연산자
- @font-face
- offsetHeight
- scrollTop
- 점 표기법
- 부등 연산자
- clientHeight
- scrollHeight
- constructor
- innerHeight
- property
- 링크막기 #a링크막기
- 동등 연산자
- javascript class
- 프로퍼티
- outerHeight
- 대괄포 표기법
- clinetTop
- [[Prototype]]
- offsetTop
- 일치 연산자
- 객체의 프로퍼티
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
글 보관함