scrollWidth and scrollHeight Methods tutorial in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>scrollWidth scrollHeight Methods JavaScript</title>
<link rel="stylesheet" href="css/scrollWidth_scrollHeight_Methods_JavaScript.css">
</head>
<body>
<h2>JavaScript scrollWidth & scrollHeight</h2>
<div id="box">
<div id="inner-box"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, necessitatibus laboriosam placeat adipisci ipsa
libero architecto? Expedita laboriosam perferendis eaque quo non praesentium eligendi placeat ducimus et omnis
ut consequatur facere soluta sed aliquam, veniam beatae? Eius earum repellat quidem nisi saepe esse consequuntur
voluptas, at sit expedita amet incidunt perferendis consectetur! Dolores quae ipsam ut animi similique veniam ea
minus, magni deserunt, eos at voluptate quo esse voluptatum asperiores, numquam quam corrupti. Voluptatibus
officia similique eum obcaecati? Asperiores totam incidunt sit placeat, corporis excepturi rerum recusandae.
Alias consectetur fugiat dignissimos sapiente iusto et quia quis cum est delectus odit, necessitatibus beatae
sequi error sed accusantium saepe quos dicta vitae expedita. Ut aliquam, iusto explicabo saepe suscipit
incidunt? Deserunt laborum amet error, porro dolore cumque excepturi quos alias possimus expedita illum nihil
accusantium corrupti! Distinctio, et, voluptates debitis iure, qui sequi vero aut sapiente dolores magni ut
harum rem ab. Esse veniam corporis qui modi vitae ab sit possimus rem a ratione temporibus excepturi architecto
error neque praesentium, animi at recusandae eligendi odit dolorem sed amet, quam ipsa! Ratione, dolore iste eos
repellat, nam impedit consectetur animi iure adipisci necessitatibus facilis incidunt unde cum soluta? Ullam
cumque rem voluptatum laborum quo, accusantium provident harum omnis reiciendis nisi minima eum? Officia commodi
cum ex labore laborum doloremque eum, doloribus reprehenderit cumque alias, atque ut eaque quasi veritatis
quaerat aut soluta. Deleniti ad necessitatibus recusandae enim ratione reprehenderit nulla, dignissimos aliquam
eligendi sit rem aliquid beatae, sunt eum! Fugiat ut quos repellat nam rem, molestias voluptatibus omnis natus
praesentium soluta neque nisi placeat quod, pariatur quis, incidunt tempore! Ab ex laborum quibusdam, nemo
placeat molestiae praesentium dolorem debitis in. Reprehenderit fugiat excepturi numquam quaerat aspernatur sit
et repellendus libero hic aut doloremque, dicta quo architecto sed labore cumque magnam repudiandae distinctio
explicabo ex laudantium itaque velit! Quod voluptatem modi corrupti voluptas libero harum, hic odit vero?
Debitis vel molestias optio delectus ea amet obcaecati at odio. Alias modi dolorum neque qui recusandae
inventore sit beatae adipisci fugit? Ut molestiae placeat quod. Sunt libero commodi eveniet aspernatur ab totam?
Pariatur culpa ex voluptatum fugiat dolorum suscipit quia! Omnis maiores iure magni, consequatur corrupti quas
exercitationem cupiditate asperiores error, ut itaque minus illum sint, ullam similique excepturi aperiam optio
quaerat voluptatem nam labore! Atque laboriosam excepturi sed! Sit quibusdam iste blanditiis consequatur! Magni
iste, quod eum non hic dolore provident neque obcaecati corrupti quos veniam, ullam necessitatibus. Explicabo
praesentium optio sapiente eveniet quo voluptas illum, consequuntur molestias placeat maiores distinctio,
facere, tempora tenetur molestiae! Consectetur consequatur aperiam saepe cumque eius possimus, quasi expedita
dolorem veniam molestias omnis officia optio laborum adipisci! Esse nobis excepturi vitae asperiores atque
reprehenderit amet perspiciatis. Eius, vero adipisci doloremque quas enim repudiandae modi itaque reprehenderit
accusamus! Pariatur quos vitae nulla atque impedit, totam ut voluptatibus? Repellendus, natus laboriosam, illum
beatae quo sed facilis nulla praesentium cum harum dolorum sit unde ipsam consequatur odit libero? Qui delectus
aut voluptas corporis quos molestiae nemo error tempora reiciendis quasi nisi veniam, unde suscipit optio facere
vitae deleniti earum eligendi beatae sed quae! Illo labore distinctio voluptas odio nemo consequuntur! Eos,
eligendi reiciendis similique possimus, ipsam soluta itaque, alias culpa laudantium consequuntur nisi nam
voluptatem aut dolore vitae totam. Ipsum asperiores dicta quae voluptatum corporis ad dolorum? Minus accusantium
molestias repudiandae eligendi blanditiis minima expedita perferendis error adipisci eveniet perspiciatis, dicta
alias quas rem omnis architecto reiciendis maiores. Quia quam sit temporibus culpa ipsam id, libero debitis
error modi sed. Libero fugit maiores quis? Nobis tempore tenetur accusamus, porro excepturi autem, odio quidem
reiciendis quod in esse, amet labore! Tempore autem aliquid aperiam.
</div>
<script>
const target = document.querySelector("#box");
var scroll_width = target.scrollWidth;
var scroll_height = target.scrollHeight;
console.log("Scroll Width : " + scroll_width);
console.log("Scroll Height : " + scroll_height);
</script>
</body>
</html>
Below File is css/scrollWidth_scrollHeight_Methods_JavaScript.css File
body {
font-family: arial;
}
#box {
background: #ffc0cb;
width: 300px;
height: 300px;
padding: 10px;
box-sizing: border-box;
overflow: auto;
}
#inner-box {
width: 600px;
height: 100px;
background: #90ee90;
}.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment