Html - Automatic horizontal scrollable div

Marius123
December 5, 2023
151 views
0 votes
2 Answers

        const scrollableDiv = document.querySelectorAll(".scrollableDiv a");
        const contentH2 = document.querySelectorAll("#content h2");

        contentH2.forEach((element, index) => {

            let observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        scrollableDiv[index].style.color = "brown";
                    }else{
                        scrollableDiv[index].style.color = "";
                    }
                })
            });

            observer.observe(element);
        });

        .scrollableDiv{
            width: 100%;
            height: max-content;
            background-color: aqua;
            position: fixed;
            top: 0;
            left: 0;
            display: grid;
            grid-template-columns: repeat(3, 700px);
            overflow-x: scroll;
        }
        .scrollableDiv::-webkit-scrollbar{
            display: none;
        }

        .scrollableDiv a{
            display: inline-block;
            width: 700px;
            color: black;
            border: 1px solid black;
        }

    <div class="scrollableDiv">
        <a href="#firstTitle">Hello1</a>
        <a href="#secondTitle">Hello2</a>
        <a href="#thirdTitle">Hello3</a>
    </div>


    <section class="content" id="content">
        <h2 id="firstTitle">Hello1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>

        <h2 id="secondTitle">Hello2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>

        <h2 id="thirdTitle">Hello3</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cum nihil officia voluptates distinctio odio accusamus odit hic labore. Amet accusantium quos autem consectetur magnam veniam sunt qui nemo aspernatur vel quisquam cum magni facere impedit corporis, beatae nam inventore incidunt itaque doloribus et sapiente. Rem exercitationem excepturi est ipsum dicta sint, ipsam repellendus, numquam, ut pariatur atque molestiae nihil facilis quae inventore! Exercitationem odio necessitatibus laboriosam libero corrupti, nihil aspernatur dolores assumenda tenetur. Veritatis veniam rem vero quibusdam maxime architecto praesentium enim quasi necessitatibus neque voluptatibus a officiis quod, sed hic, ab aut et sint aliquid tempore, voluptas animi libero earum. Aliquam soluta nemo fuga qui, obcaecati explicabo sunt officia. Similique laboriosam animi sint perferendis expedita minima aliquam repellat reiciendis? Doloremque vel beatae commodi quia, eveniet assumenda! Ullam doloribus eum, cumque quidem aliquam assumenda eveniet maiores facere non numquam nisi ipsum aut adipisci alias harum omnis beatae consectetur maxime, sint molestiae dolore possimus fuga sed excepturi? Animi accusamus sunt nam qui alias. Fugit ipsa obcaecati doloribus, voluptatibus dolore ullam odit dignissimos dolor molestias, minus deserunt natus repellat ea a distinctio dicta cumque blanditiis. Blanditiis consequuntur et quis quia sit suscipit molestias minima minus veniam tenetur natus quae consectetur at, laborum exercitationem, harum voluptatum temporibus dolores possimus laudantium hic eos dolorum? Eveniet quibusdam est facilis, fugiat tenetur, corrupti architecto possimus rerum placeat id quia deleniti veniam, temporibus earum excepturi. Ipsum atque numquam tempore corrupti nesciunt est eveniet fugiat culpa nemo, rerum, reprehenderit modi placeat nam optio deleniti aliquam eum doloribus quae! Sit, deserunt aperiam. Pariatur provident nam omnis hic culpa quasi illum ea quod cum sapiente quia, corporis eligendi veritatis repellat fugiat doloremque tempore sequi! Nihil quidem fugiat officia ea accusamus, dolores, a iusto eius impedit aliquid ut. Exercitationem non, et saepe soluta, voluptas explicabo laborum, adipisci recusandae quisquam sunt impedit. Possimus iure expedita blanditiis repellat odit alias repudiandae. Architecto atque autem reiciendis ut iure quod? Eaque ex, ullam rerum iusto omnis quis magni facere nobis deserunt eligendi dolorum repellendus pariatur, expedita quae autem modi delectus, cumque dolore commodi accusantium voluptate. Atque laborum saepe quo. Repellat commodi quas, delectus deserunt sed atque ex optio cupiditate nulla sequi excepturi corrupti animi maxime quos reiciendis hic quae dolores facere esse id facilis ipsum sit molestiae? Corporis natus beatae, nostrum cum, rerum eum ea dicta dolor, vel expedita nam laboriosam atque? Debitis voluptatum et rerum id optio adipisci sequi quibusdam repellendus libero, iure distinctio aliquid! Culpa qui expedita quasi assumenda. Placeat qui eos magni. Veritatis exercitationem, sapiente earum cupiditate quae quod optio, unde eius nisi laborum animi impedit quidem eum reprehenderit tempora voluptatem in distinctio ea hic ipsam facere molestiae aut quam sint. Exercitationem totam, ad repellendus, ipsa odit alias consequatur sit suscipit dignissimos sed, nobis earum! Dignissimos nobis similique quo perferendis nam eveniet quae assumenda minima, sequi culpa, in nulla necessitatibus reprehenderit id ducimus tempore totam earum quidem magni libero dolorem! Obcaecati quos officiis, enim praesentium fugit cum nemo necessitatibus adipisci incidunt doloremque, hic inventore tenetur dignissimos tempora in pariatur accusantium quas.</p>
    </section>

I have a scrollable div with three anchor tags.
[Here you can see the div with the three a tags.](https://i.stack.imgur.com/VsOla.png)
In code I used Intersection Observer when I reach a title on a page it gets highlighted this anchor tags. Now I want to scroll to a specific anchor tag when I reach to a title on the page. How I’m going to do that?
Down below is the code. What I want is on the moment the H2 gets in the view the anchor tag to scroll on x axis. Thank you for the help!🤗

Answers

- RaoAsim
- December 5, 2023 at 2:55 pm
- 0 votes
0
Well you use scrollIntoView property in your Intersection Observer function, like this:
```
document.getElementById("id of the div").scrollIntoView({scroll:"smooth"})
```
Login or Signup to reply.

const scrollableDiv = document.querySelector(".scrollableDiv");

contentH2.forEach((element, index) => {
    let observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                scrollableDiv[index].style.color = "brown";
                // Ajustar el desplazamiento aquí
                const anchor = scrollableDiv.children[index];
                scrollableDiv.scrollLeft = anchor.offsetLeft - anchor.clientWidth / 2;
            } else {
                scrollableDiv[index].style.color = "";
            }
        });
    });

    observer.observe(element);
});

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Automatic horizontal scrollable div

Answers