How to get scroll position in scrollable container

Question

Following is my code, how to get scroll position in scrollable div not scroll position in document

<div id="scrollable" style="width:100%; height:300px; overflow: scroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur doloremque eligendi fugit ipsa qui quo repudiandae rerum! Blanditiis debitis eligendi est modi, placeat repudiandae ullam velit. Aliquam asperiores consectetur, corporis cumque, delectus dignissimos distinctio dolor, dolores eius eligendi eos eveniet fugit iste maxime nemo nulla quisquam ratione repellendus repudiandae saepe sit tempore voluptatibus. Alias, quas, veritatis? Eius laudantium magnam qui tempora. Adipisci doloremque eos ex expedita fugiat id itaque maxime nihil nobis perspiciatis quam quod rem rerum, soluta tempore veniam vero vitae. Ab asperiores corporis delectus earum eum, explicabo fugiat ipsa iste laborum maiores minus natus nesciunt, odio, perspiciatis praesentium provident recusandae repudiandae unde vel voluptate! Animi asperiores eius error eum ex ipsam nesciunt nisi, officia perspiciatis quae quaerat recusandae repudiandae sint vel veniam vitae voluptas voluptate voluptates. Assumenda, ea, laudantium. A asperiores commodi doloribus eius fugit illum non pariatur quae quam, quas rem reprehenderit veritatis voluptatum. Eaque enim impedit libero perspiciatis quibusdam saepe. Accusamus asperiores aut consequatur consequuntur dolor ea, eaque eius excepturi fugit incidunt magni molestiae nesciunt nisi nulla pariatur possimus quae saepe sunt, suscipit veniam! Ab ad assumenda blanditiis delectus distinctio earum eius iste maxime officiis, praesentium, quam quis rem totam, unde ut. Blanditiis fugiat mollitia quo rem? Amet consequuntur distinctio doloribus explicabo, illo ipsa iure laborum laudantium libero numquam odit possimus repellat suscipit tempora tenetur ut vel. Ab aliquam architecto deserunt esse, et minus mollitia nesciunt odio? Ab asperiores blanditiis eum expedita, facilis ipsam maiores quae quasi quo quos? Aliquid atque, beatae consequatur deleniti deserunt dolor dolores enim error et expedita explicabo in incidunt iste iure labore laudantium magni mollitia nesciunt nulla omnis perferendis perspiciatis, quaerat quas quasi qui quibusdam quidem quis quisquam quos ratione, repellendus repudiandae sed tenetur totam unde veniam vero? Ab accusantium ad asperiores, consectetur culpa dolor dolore dolores eius fuga impedit ipsa ipsam ipsum iure labore maiores necessitatibus officiis recusandae reiciendis rem reprehenderit rerum sed sequi temporibus voluptates voluptatibus. Accusantium distinctio ex in iste libero necessitatibus nobis non nostrum placeat totam voluptatem, voluptatibus. Aliquam architecto eos error fugit molestias numquam porro temporibus voluptatem. Accusantium ad aliquid amet atque beatae dignissimos dolore error fugiat hic in ipsum labore laudantium mollitia nobis non odio, possimus quae qui quidem tenetur vero voluptate voluptates voluptatum! Accusamus adipisci alias amet animi architecto atque aut beatae consequatur cum cupiditate deleniti dignissimos dolor dolores error ex exercitationem facere fuga iusto laboriosam laudantium minima nam, nulla numquam obcaecati placeat possimus provident quaerat quasi qui quos reiciendis sit temporibus tenetur totam velit voluptas voluptatum? Asperiores autem beatae debitis, dolor dolores enim maxime minus mollitia, natus nihil non nulla odit perferendis perspiciatis placeat praesentium saepe soluta voluptates! Accusamus accusantium alias, amet autem cumque debitis deleniti dicta ducimus earum excepturi, fugiat illum ipsa iure magni maxime minima molestiae non nostrum odit placeat quae quia quis reprehenderit rerum suscipit ut velit vero voluptatem voluptates voluptatibus. Ab accusantium ad alias aliquam aspernatur autem cupiditate dolorem dolores inventore itaque iusto minima odit omnis perspiciatis quis, quo quod quos voluptatibus. A ab animi aperiam architecto autem blanditiis commodi consequatur cumque dicta dolorem doloremque ea eos eum ex harum impedit in ipsa ipsum laborum libero, minima minus neque, nesciunt nulla numquam officia pariatur perspiciatis quae quis quod recusandae repellendus rerum saepe sapiente tempore temporibus voluptatum. Aperiam deleniti doloremque expedita fugiat ipsam labore nemo nostrum perferendis similique voluptatem. Accusamus aspernatur assumenda aut autem commodi cumque, cupiditate distinctio ea earum exercitationem expedita in inventore, ipsa ipsam iure mollitia natus neque non nostrum nulla porro quam quibusdam quis quisquam reiciendis repellendus suscipit tempore temporibus ullam unde. Consequatur earum fugiat necessitatibus reprehenderit sapiente vel. Accusamus ad, architecto at autem consequatur deserunt dolorum eveniet ex itaque libero molestias nihil non ut. Ab accusantium asperiores at commodi cumque dignissimos distinctio dolor ea enim eveniet explicabo fugit hic illum ipsa ipsum labore, laboriosam minima molestiae mollitia natus necessitatibus nobis nulla obcaecati odit omnis perferendis porro qui quos ratione recusandae reiciendis rem repudiandae rerum sunt tempore velit voluptatum? Commodi harum illo optio repellendus repudiandae voluptatum. Adipisci alias aperiam consectetur consequuntur cum cumque dicta distinctio dolorum, fuga harum impedit iure, labore laboriosam minima molestias mollitia nisi perspiciatis sint soluta veniam voluptate voluptatem voluptates. Excepturi explicabo fuga impedit minima praesentium repellat repudiandae soluta. Aliquam architecto atque, commodi consequuntur corporis cupiditate dicta distinctio doloribus dolorum earum, eius ex harum id iste, itaque laborum magnam molestiae pariatur porro repellat saepe voluptate voluptatum. Adipisci enim error fuga nesciunt voluptatibus. A accusantium, aut eaque earum ipsam iste minus molestias rerum sed voluptatem. Aliquid asperiores aut consequatur corporis doloremque doloribus eius esse fuga illum inventore ipsa ipsam iste magni maiores molestias non nulla obcaecati praesentium quisquam rem similique sint suscipit temporibus, vitae voluptatem. Aliquam architecto aspernatur autem consectetur consequatur facilis harum laboriosam, minus neque, perspiciatis praesentium quidem quos sapiente. Debitis esse fuga iusto labore libero minima minus molestiae mollitia nulla obcaecati odio quibusdam quidem quis quod sapiente veniam, voluptatibus! Eum incidunt, inventore obcaecati praesentium quibusdam reiciendis rem repellat temporibus! Accusamus aperiam architecto assumenda atque deleniti dolore doloribus dolorum, eius est et facere hic illo iste molestias natus nihil nisi nulla placeat quibusdam rerum sapiente, totam voluptatibus voluptatum. Maiores quasi ut vitae voluptate! Animi debitis doloremque ex non nostrum, sed sint? A animi aperiam assumenda beatae consequuntur cum dolor earum eligendi error et eum eveniet harum iusto laboriosam nam, necessitatibus, nemo, odit optio quam quibusdam quis quo sapiente tempore totam ullam veniam voluptatibus! Asperiores, ipsam, voluptas. At deleniti doloribus fugit illo, incidunt libero maiores molestias nesciunt nisi odio, officia porro praesentium saepe tenetur ullam veritatis vero. Ad, adipisci aperiam assumenda corporis dolor dolore dolorem dolorum ea earum error excepturi inventore, laborum libero molestiae mollitia nemo numquam pariatur perferendis praesentium reiciendis rem repellat saepe sed sunt ut vel voluptatem voluptates. Aliquam commodi eligendi fuga magni nesciunt nulla obcaecati placeat repudiandae, rerum similique temporibus, tenetur voluptates. Aliquid architecto asperiores atque culpa ducimus ea earum eveniet facilis, fuga incidunt minima nam nisi odit officia optio placeat quas qui totam vel, vitae? A autem perferendis quo voluptatum! At et ex ipsa molestiae placeat porro similique sit sunt?
</div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
  var scrollable = document.querySelector("#scrollable");
  $(scrollable).on('scroll', (ev) => {
    console.log(`container scroll top:${$(scrollable).scrollTop()}`)
    console.log(`container scroll height:${$(scrollable).height()}`)
  })
</script>

Answer 1

Give this a go, this might help https://www.geeksforgeeks.org/how-to-get-the-position-of-scrollbar-using-javascript/

Answer 2

I find the solution:

see my old code, when scroll, the scrollableDiv.scrolltop is changed

so the key is I should get scrollableDiv.scrolltop max value(when scroll to bottom)

the solution see here: https://stackoverflow.com/a/17244962/6011193

use code: scrollable.scrollHeight - $(scrollable).height() , $(scrollable).height() is jquery height

here is full code:

<div id="scrollable" style="width:100%; height:300px; overflow: scroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur doloremque eligendi fugit ipsa qui quo repudiandae rerum! Blanditiis debitis eligendi est modi, placeat repudiandae ullam velit. Aliquam asperiores consectetur, corporis cumque, delectus dignissimos distinctio dolor, dolores eius eligendi eos eveniet fugit iste maxime nemo nulla quisquam ratione repellendus repudiandae saepe sit tempore voluptatibus. Alias, quas, veritatis? Eius laudantium magnam qui tempora. Adipisci doloremque eos ex expedita fugiat id itaque maxime nihil nobis perspiciatis quam quod rem rerum, soluta tempore veniam vero vitae. Ab asperiores corporis delectus earum eum, explicabo fugiat ipsa iste laborum maiores minus natus nesciunt, odio, perspiciatis praesentium provident recusandae repudiandae unde vel voluptate! Animi asperiores eius error eum ex ipsam nesciunt nisi, officia perspiciatis quae quaerat recusandae repudiandae sint vel veniam vitae voluptas voluptate voluptates. Assumenda, ea, laudantium. A asperiores commodi doloribus eius fugit illum non pariatur quae quam, quas rem reprehenderit veritatis voluptatum. Eaque enim impedit libero perspiciatis quibusdam saepe. Accusamus asperiores aut consequatur consequuntur dolor ea, eaque eius excepturi fugit incidunt magni molestiae nesciunt nisi nulla pariatur possimus quae saepe sunt, suscipit veniam! Ab ad assumenda blanditiis delectus distinctio earum eius iste maxime officiis, praesentium, quam quis rem totam, unde ut. Blanditiis fugiat mollitia quo rem? Amet consequuntur distinctio doloribus explicabo, illo ipsa iure laborum laudantium libero numquam odit possimus repellat suscipit tempora tenetur ut vel. Ab aliquam architecto deserunt esse, et minus mollitia nesciunt odio? Ab asperiores blanditiis eum expedita, facilis ipsam maiores quae quasi quo quos? Aliquid atque, beatae consequatur deleniti deserunt dolor dolores enim error et expedita explicabo in incidunt iste iure labore laudantium magni mollitia nesciunt nulla omnis perferendis perspiciatis, quaerat quas quasi qui quibusdam quidem quis quisquam quos ratione, repellendus repudiandae sed tenetur totam unde veniam vero? Ab accusantium ad asperiores, consectetur culpa dolor dolore dolores eius fuga impedit ipsa ipsam ipsum iure labore maiores necessitatibus officiis recusandae reiciendis rem reprehenderit rerum sed sequi temporibus voluptates voluptatibus. Accusantium distinctio ex in iste libero necessitatibus nobis non nostrum placeat totam voluptatem, voluptatibus. Aliquam architecto eos error fugit molestias numquam porro temporibus voluptatem. Accusantium ad aliquid amet atque beatae dignissimos dolore error fugiat hic in ipsum labore laudantium mollitia nobis non odio, possimus quae qui quidem tenetur vero voluptate voluptates voluptatum! Accusamus adipisci alias amet animi architecto atque aut beatae consequatur cum cupiditate deleniti dignissimos dolor dolores error ex exercitationem facere fuga iusto laboriosam laudantium minima nam, nulla numquam obcaecati placeat possimus provident quaerat quasi qui quos reiciendis sit temporibus tenetur totam velit voluptas voluptatum? Asperiores autem beatae debitis, dolor dolores enim maxime minus mollitia, natus nihil non nulla odit perferendis perspiciatis placeat praesentium saepe soluta voluptates! Accusamus accusantium alias, amet autem cumque debitis deleniti dicta ducimus earum excepturi, fugiat illum ipsa iure magni maxime minima molestiae non nostrum odit placeat quae quia quis reprehenderit rerum suscipit ut velit vero voluptatem voluptates voluptatibus. Ab accusantium ad alias aliquam aspernatur autem cupiditate dolorem dolores inventore itaque iusto minima odit omnis perspiciatis quis, quo quod quos voluptatibus. A ab animi aperiam architecto autem blanditiis commodi consequatur cumque dicta dolorem doloremque ea eos eum ex harum impedit in ipsa ipsum laborum libero, minima minus neque, nesciunt nulla numquam officia pariatur perspiciatis quae quis quod recusandae repellendus rerum saepe sapiente tempore temporibus voluptatum. Aperiam deleniti doloremque expedita fugiat ipsam labore nemo nostrum perferendis similique voluptatem. Accusamus aspernatur assumenda aut autem commodi cumque, cupiditate distinctio ea earum exercitationem expedita in inventore, ipsa ipsam iure mollitia natus neque non nostrum nulla porro quam quibusdam quis quisquam reiciendis repellendus suscipit tempore temporibus ullam unde. Consequatur earum fugiat necessitatibus reprehenderit sapiente vel. Accusamus ad, architecto at autem consequatur deserunt dolorum eveniet ex itaque libero molestias nihil non ut. Ab accusantium asperiores at commodi cumque dignissimos distinctio dolor ea enim eveniet explicabo fugit hic illum ipsa ipsum labore, laboriosam minima molestiae mollitia natus necessitatibus nobis nulla obcaecati odit omnis perferendis porro qui quos ratione recusandae reiciendis rem repudiandae rerum sunt tempore velit voluptatum? Commodi harum illo optio repellendus repudiandae voluptatum. Adipisci alias aperiam consectetur consequuntur cum cumque dicta distinctio dolorum, fuga harum impedit iure, labore laboriosam minima molestias mollitia nisi perspiciatis sint soluta veniam voluptate voluptatem voluptates. Excepturi explicabo fuga impedit minima praesentium repellat repudiandae soluta. Aliquam architecto atque, commodi consequuntur corporis cupiditate dicta distinctio doloribus dolorum earum, eius ex harum id iste, itaque laborum magnam molestiae pariatur porro repellat saepe voluptate voluptatum. Adipisci enim error fuga nesciunt voluptatibus. A accusantium, aut eaque earum ipsam iste minus molestias rerum sed voluptatem. Aliquid asperiores aut consequatur corporis doloremque doloribus eius esse fuga illum inventore ipsa ipsam iste magni maiores molestias non nulla obcaecati praesentium quisquam rem similique sint suscipit temporibus, vitae voluptatem. Aliquam architecto aspernatur autem consectetur consequatur facilis harum laboriosam, minus neque, perspiciatis praesentium quidem quos sapiente. Debitis esse fuga iusto labore libero minima minus molestiae mollitia nulla obcaecati odio quibusdam quidem quis quod sapiente veniam, voluptatibus! Eum incidunt, inventore obcaecati praesentium quibusdam reiciendis rem repellat temporibus! Accusamus aperiam architecto assumenda atque deleniti dolore doloribus dolorum, eius est et facere hic illo iste molestias natus nihil nisi nulla placeat quibusdam rerum sapiente, totam voluptatibus voluptatum. Maiores quasi ut vitae voluptate! Animi debitis doloremque ex non nostrum, sed sint? A animi aperiam assumenda beatae consequuntur cum dolor earum eligendi error et eum eveniet harum iusto laboriosam nam, necessitatibus, nemo, odit optio quam quibusdam quis quo sapiente tempore totam ullam veniam voluptatibus! Asperiores, ipsam, voluptas. At deleniti doloribus fugit illo, incidunt libero maiores molestias nesciunt nisi odio, officia porro praesentium saepe tenetur ullam veritatis vero. Ad, adipisci aperiam assumenda corporis dolor dolore dolorem dolorum ea earum error excepturi inventore, laborum libero molestiae mollitia nemo numquam pariatur perferendis praesentium reiciendis rem repellat saepe sed sunt ut vel voluptatem voluptates. Aliquam commodi eligendi fuga magni nesciunt nulla obcaecati placeat repudiandae, rerum similique temporibus, tenetur voluptates. Aliquid architecto asperiores atque culpa ducimus ea earum eveniet facilis, fuga incidunt minima nam nisi odit officia optio placeat quas qui totam vel, vitae? A autem perferendis quo voluptatum! At et ex ipsa molestiae placeat porro similique sit sunt?
</div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
  var scrollable = document.querySelector("#scrollable");
  $(scrollable).on('scroll', (ev) => {
    console.log(`current scroll position:${scrollable.scrollTop}`)
    console.log(`max scroll position: ${scrollable.scrollHeight - $(scrollable).height()}`)
  })
</script>