时间戳

首页 > 解决方案 > 只滚动页面的一部分

html - 只滚动页面的一部分

问题描述

我在顶部有一个固定的工具栏。页面的滚动条适用于整个页面。工具栏不会从顶部移动并且始终可见，我对此没有任何问题。但我只希望页面的内容可以滚动，而不是整个页面

示例我在正文中有一个名为 content的div，我只希望它可以滚动而不是整个正文

代码

<body>
  <div>
     <div class="Top">
        <?php $var = 1; include('PHP/ToolBar.php') ?>
     </div>

     <div class="content">
        <h5>Page Content</h5>
     </div> 
  </div>
</body>

整个页面滚动，但我只希望内容可滚动。

使用 webkit 自定义滚动条

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

标签： htmlcssscroll

解决方案

如果您的页面仅分为.Top和.content部分，您可以按以下方式进行操作

.Top{
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      background-color: crimson;
      height:40px;
  }
  .content{
      height: calc(100% - 40px);
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      overflow-y: scroll;
      background-color: cyan;
  }

  .content::-webkit-scrollbar {
      width: 8px;
  }
 
  .content::-webkit-scrollbar-track {
    background-color: #ededed;
  }
 
  .content::-webkit-scrollbar-thumb {
     background-color: #999999;
     outline: 1px solid #999999;
  }
<body>

    <div>
        <div class="Top">
           
        </div>
   
        <div class="content">
           <h5>Page Content</h5>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque doloremque, quisquam possimus qui facilis eveniet quas veniam eos, repellendus officiis explicabo quia quidem aut a, voluptas nesciunt. Soluta ducimus ad eos mollitia est, non consectetur quaerat nostrum natus voluptas odio esse quis sequi quidem sapiente. Tempore sunt molestiae, maiores velit itaque harum error possimus temporibus! Voluptatibus, rerum. Reiciendis laudantium porro maiores consequatur adipisci animi sunt aperiam ratione saepe. Fugit, dignissimos rem, dolores quam velit quos dicta facere asperiores est ut ipsa reprehenderit culpa illum! Id reiciendis est animi voluptas fugiat quisquam nihil alias quia impedit voluptatibus reprehenderit voluptatum, optio sequi ipsa eaque eos facilis vitae recusandae rerum dolor numquam iste doloribus nulla magni? Quaerat ipsam accusamus ex laborum sint repudiandae maiores, animi explicabo, similique dolorum hic quos assumenda veritatis perspiciatis eos harum deleniti distinctio! Placeat officia magni voluptate dolores facilis, quaerat provident facere reiciendis sequi quisquam eos mollitia laborum cumque vel similique tempore itaque explicabo consectetur, aliquid alias labore quos officiis ab sapiente. Odio numquam repellendus ex rem, quae, natus consequuntur temporibus iusto atque necessitatibus earum odit libero quia reiciendis tenetur distinctio dolorem officiis impedit accusantium fuga placeat. Nobis voluptas maiores doloremque? Fuga nostrum nisi sapiente eos aut quam quasi deleniti, reiciendis quis aliquam placeat unde excepturi optio soluta magnam vero architecto. Ad sunt, nemo laboriosam hic aut natus. Consequatur optio officiis nam. Ab ratione accusantium dicta rerum aliquam earum quae temporibus, quibusdam impedit? Saepe laborum eligendi, similique doloribus dolorum dolorem cum laudantium commodi? Id dolorum atque pariatur consectetur dolorem dolore minima amet esse voluptas veniam ad a accusamus non doloribus totam eos nisi eius nobis, quo maxime vitae! Culpa minus accusamus, sed, pariatur facilis consequuntur sit nam debitis perspiciatis deleniti a minima sint unde quam voluptas quidem porro aut repellendus obcaecati. Magni voluptatem odio quia, natus sit quos, laudantium, dolores quam recusandae deserunt esse? Ad facilis sunt a eum aliquam assumenda hic aliquid! Fugit optio quo, reiciendis unde a laborum alias quos incidunt voluptate non cupiditate aspernatur. Sint excepturi, rerum quod exercitationem accusamus non minus, at rem maiores earum, neque accusantium molestiae repellat? Nam, porro optio tenetur harum magnam dolorem alias at tempore dolores maiores sunt ipsam vel culpa placeat eligendi ullam iusto quam qui aliquam et sequi officiis. Corrupti incidunt sit consequatur asperiores facilis laboriosam quasi architecto tenetur soluta ea, cupiditate dolor! Cumque recusandae voluptates aperiam ab, officia dolores esse assumenda quae praesentium nihil quasi qui voluptas quisquam eveniet fugit at excepturi ex, quidem accusamus in necessitatibus molestias eaque veniam deserunt. Repellat nihil voluptate ipsum repellendus! Ullam, harum! Eius reprehenderit corporis facere, culpa maxime temporibus atque laboriosam quos unde. Quos illo impedit voluptatum aliquid maiores, dolorem autem dignissimos? Voluptatibus labore quia accusantium ea accusamus aliquam est rerum tenetur, quidem deserunt. Amet placeat quo aspernatur voluptatem iure at ea eum temporibus. Molestiae eos ducimus ipsa molestias? Tenetur laborum quae adipisci at vitae accusamus tempore aliquid dolorem praesentium doloribus quas autem officiis consectetur, nulla fuga et exercitationem. Sequi fugit ut eveniet exercitationem? Ex quo similique vel, molestias voluptatibus sit sunt quidem nemo at nostrum quas debitis eligendi, doloribus consequuntur officiis ducimus tenetur eaque amet perferendis blanditiis, nulla nam! Cumque, sequi distinctio? Assumenda, facere tempore error blanditiis, maiores, magnam quis quaerat molestias voluptas iusto voluptates fuga explicabo beatae ex impedit minus reprehenderit maxime cumque consectetur. Aperiam, eos modi ut quisquam ab pariatur eum cum velit nostrum impedit amet, quod temporibus itaque tenetur recusandae magni nisi tempore deserunt assumenda provident. Unde aut delectus voluptatibus iusto possimus nulla quam odio totam, ullam reiciendis quae eos magnam, exercitationem ea asperiores? Rem repellat sint debitis facilis placeat officiis, eveniet nihil quos. Sit fugiat quis nesciunt illum necessitatibus earum, accusantium praesentium, sapiente numquam quaerat ab ea eius iusto, deserunt accusamus inventore unde doloribus suscipit maxime hic? Similique iusto harum odit dicta ea amet, ullam unde. Deserunt aut earum iusto impedit adipisci similique, aliquid amet numquam facilis voluptatum consectetur, error accusantium laboriosam porro delectus, voluptates consequatur accusamus maiores unde modi? Ullam quidem iure, molestias odit non ex quasi, exercitationem perferendis dolore modi nostrum provident cumque atque nihil quae iusto necessitatibus fugit deserunt doloribus? Possimus accusamus aliquid cumque unde iusto ea ad nihil eaque dolore, vel eveniet! Debitis facere maxime expedita amet corrupti nihil rem vitae qui eveniet.</p>
 
        </div> 
     </div>
 
</body>

推荐阅读