css - 如何在 React Bootstrap 中使 div 可单独滚动

Question

所以我目前正在尝试为我的网站使用 React Bootstrap。我很困惑如何使只有一个 div 可滚动而其他 div 不可滚动。这是我在 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/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
                    <div className="position-sticky">
                        stick please
                    </div>
                </Col>
            </Row>
        </Container>
    );
}

export default App

在图像中，<div>please stick</div>看不到 ，因为它位于下方，并且<Col>avatar</Col>当我想让文本 Avatar 粘贴时，它是可滚动的。

有谁知道如何让一个 div 独立滚动而其他 div 保持并且不能滚动？提前致谢

标签： cssreactjsbootstrap-4react-bootstrap

Answer 1

给出可滚动的 div overflow-y: auto。在您将高度指定给其父级之前，容器的一个子级不会滚动。在下面的示例中，我给出了height: 100%，因为我想将页面分成 2 个部分，这些部分将占据全高，即 (100vh)。您还可以提供自定义高度，即height: 300px；

只需添加height父容器和overflow-y: auto要滚动的子元素。

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>