"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Question

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute positions. I am aware that absolute positioning disrupts the natural flow... and I need to find a way to make this scrollable div work.

The issue at hand: when the page width is less than the combined width of all images, the images overflow into the next div, disregarding the margins set by another div.

I am considering a solution where I use useRef to retrieve the width from the 'a' tag and calculate the left position to create a gap. For example, left: 0, left: 580*funcGetWidthFromRef(), left: funcGetWidthFromRef().

Is there another alternative solution?

Here is my code:

import Image from "next/image";
import styles from "../../styles/Card.module.css";
export default function Card() {
    const listArticles = [1, 2, 3, 4];
    const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];
    return (
        <>
            {" "}
            <section className={`${styles.scrollableCategoryContent}`}>
                {listArticles.map((art, index) => {
                    return (
                        <article key={index} className={`styles.Game${art}`}>
                            <a
                                href=""
                                className={`${styles.cardAnchorConteirner}`}
                                style={{
                                    left: `${170 * index}px`,
                                }}
                            >
                                <Image
                                    className={`${styles.cardImage}`}
                                    width={580}
                                    height={480}
                                    objectFit="cover"
                                    objectPosition="top left"
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    alt="test"
                                ></Image>
                                <div
                                    className={`${styles.textCardBackGround}`}
                                >
                                    <h2
                                        className={`${styles.cardTitleText}`}
                                    >{`${textTitle[index]}`}</h2>
                                </div>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

.scrollableCategoryContent{
  display: grid;
  grid-auto-flow: column;
  background-color: black;
  max-width: 700;
  height: 480px;
  overflow-x: scroll;
}

Game1, .Game2, .Game3, .Game4 {
  
}

.cardAnchorConteirner{
  width: 100%;
  height: 100%;
  position: relative;
}

.cardImage{
  position: absolute;
}

.textCardBackGround {
 position: absolute;
 background-color: aqua;
 width: 100%;
 height: 20%;
 left: 0px;
 right: 0px;
 bottom: 20%;
}

.cardTitleText{
  color: white;
}

javascript html css scroll

Answer 1

Answer №1

Here is a simple solution: place a div outside all relative and absolute positioned divs. This div without positions can utilize Grid and allow the normal flow to be followed. However, problems may arise if the div or other component has zero width or height. I previously attempted to use UseRef with good results, but the code became excessively large when implementing additional solutions such as resizing images.

import Image from "next/image";
import styles from "../../styles/CardAlt.module.css";

export default function CarCompAlt() {
    const games = [1, 2, 3, 4];
    const titles = ["Valorant", "Mw2", "RPGs", "Actions"];

    return (
        <>
            <section className={`${styles.trywarp}`}>
                {games.map((value, index) => {
                    return (
                        <article
                            key={index}
                            className={`${styles.thisJustWork}`}
                        >
                            <a
                                href=""
                                className={`${styles.cardArchorContainer}`}
                            >
                                <Image
                                    className={`${styles.imageContainer}`}
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    width={584}
                                    height={480}
                                    alt={`${2265}`}
                                    objectFit="cover"
                                    objectPosition="center"
                                ></Image>
                                <h3 className={`${styles.titleContainer}`}>
                                    {titles[index]}
                                </h3>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.trywarp{
    display: grid;
    grid-auto-flow: column;
    gap: 100px;
    overflow-x: scroll;
    overflow-y: clip;
}

.thisJustWork{
    width: 500px;
    height: 500px;
    background-color: brown;
}


.cardAnchorContainer{
    position: relative;
}

.imageContainer{
    position: absolute;
}

.titleContainer{
    position: absolute;
    z-index: 50;
    color: aliceblue;
}

The solution using useRef involves giving a width to "scrollableCategoryContent" to prevent an increase in gap.

import Image from "next/image";
import { HtmlHTMLAttributes, useEffect, useRef, useState } from "react";
import styles from "../../styles/Card.module.css";

export default function Card() {
    const refScrollableCategoryContent = useRef<any>();
    const [pixelGain, setPixelGain] = useState<number>(0);
    const [widthScrollable, setWidthScrollable] = useState<any>(
        refScrollableCategoryContent.current?.getBoundingClientRect().width
    );
    const listArticles = [1, 2, 3, 4];
    const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];

    function resizeScrollable() {
        const widthRefScroll =
            refScrollableCategoryContent.current?.getBoundingClientRect().width;
        setWidthScrollable(widthRefScroll);
    }

    useEffect(() => {
        window.addEventListener("resize", resizeScrollable);
        resizeScrollable();

        return () => {
            window.removeEventListener("resize", resizeScrollable);
        };
    }, []);

    return (
        <>
            <div>
                <div>Window size: {widthScrollable}</div>
                <button
                    onClick={() => {
                        setWidthScrollable(
                            refScrollableCategoryContent.current?.getBoundingClientRect()
                        );
                    }}
                >
                    refScrollableCategoryContent
                </button>
            </div>
            
            <section
                className={`${styles.scrollableCategoryContent}`}
                ref={refScrollableCategoryContent}
            >

                {listArticles.map((art, index) => {
                    return (
                        <article key={index} className={`styles.Game${art}`}>
                            <a
                                href=""
                                className={`${styles.cardAnchorConteirner}`}
                                style={{
                                    left: `${(425 + pixelGain) * index}px`,
                                }}
                            >
                                <Image
                                    className={`${styles.cardImage}`}
                                    width={584}
                                    height={480}
                                    objectFit="cover"
                                    objectPosition="center"
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    alt="test"
                                ></Image>

                                <div
                                    className={`${styles.textCardBackGround}`}
                                >
                                    <h2
                                        className={`${styles.cardTitleText}`}
                                    >{`${textTitle[index]}`}</h2>
                                </div>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.scrollableCategoryContent{
    display: grid;
    grid-auto-flow: column;
    background-color: black;
    width: 1000px;
    height: 480px;
    overflow-x: scroll;
    overflow-y: clip;
}

.cardAnchorConreiner{
    position: relative;
}

.cardImage{
    position: absolute;
}

.textCardBackground {
    position: absolute;
    background-color: aqua;
    width: 100%;
    height: 20%;
    bottom: 20%;
}

.cardTitleText{
    color: white;
}

Answer 2

Here is a simple solution: place a div outside all relative and absolute positioned divs. This div without positions can utilize Grid and allow the normal flow to be followed. However, problems may arise if the div or other component has zero width or height. I previously attempted to use UseRef with good results, but the code became excessively large when implementing additional solutions such as resizing images.

import Image from "next/image";
import styles from "../../styles/CardAlt.module.css";

export default function CarCompAlt() {
    const games = [1, 2, 3, 4];
    const titles = ["Valorant", "Mw2", "RPGs", "Actions"];

    return (
        <>
            <section className={`${styles.trywarp}`}>
                {games.map((value, index) => {
                    return (
                        <article
                            key={index}
                            className={`${styles.thisJustWork}`}
                        >
                            <a
                                href=""
                                className={`${styles.cardArchorContainer}`}
                            >
                                <Image
                                    className={`${styles.imageContainer}`}
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    width={584}
                                    height={480}
                                    alt={`${2265}`}
                                    objectFit="cover"
                                    objectPosition="center"
                                ></Image>
                                <h3 className={`${styles.titleContainer}`}>
                                    {titles[index]}
                                </h3>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.trywarp{
    display: grid;
    grid-auto-flow: column;
    gap: 100px;
    overflow-x: scroll;
    overflow-y: clip;
}

.thisJustWork{
    width: 500px;
    height: 500px;
    background-color: brown;
}


.cardAnchorContainer{
    position: relative;
}

.imageContainer{
    position: absolute;
}

.titleContainer{
    position: absolute;
    z-index: 50;
    color: aliceblue;
}

The solution using useRef involves giving a width to "scrollableCategoryContent" to prevent an increase in gap.

import Image from "next/image";
import { HtmlHTMLAttributes, useEffect, useRef, useState } from "react";
import styles from "../../styles/Card.module.css";

export default function Card() {
    const refScrollableCategoryContent = useRef<any>();
    const [pixelGain, setPixelGain] = useState<number>(0);
    const [widthScrollable, setWidthScrollable] = useState<any>(
        refScrollableCategoryContent.current?.getBoundingClientRect().width
    );
    const listArticles = [1, 2, 3, 4];
    const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];

    function resizeScrollable() {
        const widthRefScroll =
            refScrollableCategoryContent.current?.getBoundingClientRect().width;
        setWidthScrollable(widthRefScroll);
    }

    useEffect(() => {
        window.addEventListener("resize", resizeScrollable);
        resizeScrollable();

        return () => {
            window.removeEventListener("resize", resizeScrollable);
        };
    }, []);

    return (
        <>
            <div>
                <div>Window size: {widthScrollable}</div>
                <button
                    onClick={() => {
                        setWidthScrollable(
                            refScrollableCategoryContent.current?.getBoundingClientRect()
                        );
                    }}
                >
                    refScrollableCategoryContent
                </button>
            </div>
            
            <section
                className={`${styles.scrollableCategoryContent}`}
                ref={refScrollableCategoryContent}
            >

                {listArticles.map((art, index) => {
                    return (
                        <article key={index} className={`styles.Game${art}`}>
                            <a
                                href=""
                                className={`${styles.cardAnchorConteirner}`}
                                style={{
                                    left: `${(425 + pixelGain) * index}px`,
                                }}
                            >
                                <Image
                                    className={`${styles.cardImage}`}
                                    width={584}
                                    height={480}
                                    objectFit="cover"
                                    objectPosition="center"
                                    src={
                                        "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                                    }
                                    alt="test"
                                ></Image>

                                <div
                                    className={`${styles.textCardBackGround}`}
                                >
                                    <h2
                                        className={`${styles.cardTitleText}`}
                                    >{`${textTitle[index]}`}</h2>
                                </div>
                            </a>
                        </article>
                    );
                })}
            </section>
        </>
    );
}

CSS

.scrollableCategoryContent{
    display: grid;
    grid-auto-flow: column;
    background-color: black;
    width: 1000px;
    height: 480px;
    overflow-x: scroll;
    overflow-y: clip;
}

.cardAnchorConreiner{
    position: relative;
}

.cardImage{
    position: absolute;
}

.textCardBackground {
    position: absolute;
    background-color: aqua;
    width: 100%;
    height: 20%;
    bottom: 20%;
}

.cardTitleText{
    color: white;
}

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Answer №1

Similar questions

Is there a way to verify if an AJAX request calls HTML content?

Is the flowplayer software free for use on a production server?

MUI Gradient Tracked Button

Working with Java to parse non-strict JSON data that does not have keys enclosed in quotes

Eliminate the standard cell padding in nested HTML tables

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Implementing onMouseEnter and onMouseLeave functionalities for music player

Formatting the numbers for an unordered list located outside of the content

Encasing common functions within (function($){ }(jQuery) can help to modularize and prevent

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

transmitting information using dataURL

What is the best way to ensure my footer remains at the bottom of the page even when scrolled?

Control the HTML button's state according to the information received from the server

Redirecting pages using an Ajax script in JavaScript

Leveraging Angular2's observable stream in combination with *ngFor

Transmit information to the server via an AJAX request

Sending the factory's response back to the controller in AngularJS

No Backend Detected for Tensorflow.js in Node

Can Vue support recurring time slots?

Encountered JSON array, unable to retrieve certain attributes in AngularJS