Ways to create a uniquely scrollable div in React Bootstrap

Question

Ways to create a uniquely scrollable div in React Bootstrap

Currently, I'm working on implementing React Bootstrap for my website. I am having trouble figuring out how to make only one specific div scrollable while keeping the others fixed. Below is a snippet of my code located in App.js

import * as React from 'react'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

function App() {
    return (
        <Container fluid>
            <Row style={{height: "100vh"}}>
                <Col sm={4} className="border border-primary">
                    <div>Avatar</div>
                </Col>
                <Col className="border border-primary">
                    test<br/>(content hidden for brevity)<br/>
                    <div className="position-sticky">
                        stick please
                    </div>
                </Col>
            </Row>
        </Container>
    );
}

export default App

https://i.sstatic.net/bWI0j.png From the provided image, it can be observed that the

<div>please stick</div>

element is not visible due to its position below, and the scrolling functionality is applied to the <Col>avatar</Col>. I intended for the text "Avatar" to remain fixed. https://i.sstatic.net/CW8Ev.png

If anyone has insights on how to achieve independent scrolling for one div while keeping the others static, your help would be greatly appreciated.

css reactjs bootstrap-4 react-bootstrap

Answer 1

Answer №1

To enable scrolling in a div, use overflow-y: auto. If the parent container lacks a defined height, one of its children will not scroll properly. In the example below, I've set height: 100%, splitting the page into two parts that each occupy the full height (100vh). Alternatively, you can specify a custom height like height: 300px;

Simply add the height property to the parent container and apply overflow-y: auto to the child element that requires scrolling.

body,
html {
  height: 100%;
  margin: 0;
}

div.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div.first {
  background-color: burlywood;
  padding: 1rem;
}

div.second {
  background-color: darkcyan;
  padding: 1rem;
  overflow-y: auto;
}

<div class="container">
  <div class="first">
    first
  </div>

  <div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
    s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
    reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
    delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
    quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
    laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
    quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
    esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
    odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
    qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
    tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
    omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
    iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
    Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
    id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
    dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
    voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
    nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
    praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
    non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
    aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
    adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
    enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
    recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>

Answer 2

To enable scrolling in a div, use overflow-y: auto. If the parent container lacks a defined height, one of its children will not scroll properly. In the example below, I've set height: 100%, splitting the page into two parts that each occupy the full height (100vh). Alternatively, you can specify a custom height like height: 300px;

Simply add the height property to the parent container and apply overflow-y: auto to the child element that requires scrolling.

body,
html {
  height: 100%;
  margin: 0;
}

div.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div.first {
  background-color: burlywood;
  padding: 1rem;
}

div.second {
  background-color: darkcyan;
  padding: 1rem;
  overflow-y: auto;
}

<div class="container">
  <div class="first">
    first
  </div>

  <div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
    s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
    reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
    delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
    quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
    laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
    quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
    esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
    odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
    qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
    tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
    omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
    iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
    Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
    id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
    dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
    voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
    nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
    praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
    non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
    aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
    adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
    enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
    recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>

Ways to create a uniquely scrollable div in React Bootstrap

Answer №1

Similar questions

What could be causing the collapsible links in my Bootstrap 5 project to be unresponsive?

Is next/image experiencing intermittent loading issues when deployed in a Docker container?

The dialog box fails to respond to the onClick event

Toggle the visibility of an input field based on a checkbox's onchange event

Looking to design an interactive grid for generating dynamic thumbnails

Has the payment been successfully received via PayPal?

Determining the active status of a class using oTree and JavaScript

What causes the ion-fab-button to not remain fixed within the Ionic 4 popover?

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

Restrict the amount of pages shown on the bootstrap navigation bar

The error occurred at line 12 in the app.js file, where it is unable to access properties of an undefined object, specifically the 'className' property. This occurred within an anonymous function in an HTMLDivElement

Every time I switch tabs in Material UI, React rebuilds my component

Is there a way to reduce the spacing between these child containers when they wrap?

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

The final column appearing as green within the Bootstrap CSS

Ensuring security against cross site scripting attacks on window.location.href

Instead of JSON data, HTML is being transmitted

Is there a way to conditionally style a single row in material-table?

Issues with Persistent Navbar Stickiness

Guide on fetching additional data from the server while scrolling in a ReactJS application