仅滚动页面的一部分
[英]Scroll only a part of a page
问题描述
I have a fixed Toolbar in the top.
我在顶部有一个固定的工具栏。 The scrollbar of the page is for the whole page.页面的滚动条是针对整个页面的。 The toolbar wont move from the top and is always visible and i have no problem with that.工具栏不会从顶部移动并且始终可见，我对此没有任何问题。 But i want only the content of the page to be scrollable instead of the whole page但我只希望页面的内容可滚动而不是整个页面
Example i have a div called content inside the body and i want only that to be scrollable instead of the whole body例如，我在正文中有一个名为 content 的div ，我只希望它可以滚动而不是整个正文
Code代码
<body>
<div>
<div class="Top">
<?php $var = 1; include('PHP/ToolBar.php') ?>
</div>
<div class="content">
<h5>Page Content</h5>
</div>
</div>
</body>
The whole page scrolls but i want only the content to be scrollable.整个页面都在滚动，但我只希望内容可以滚动。
Using webkit for customised scrollbar使用 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;
}
3 个解决方案
解决方案1
0 2020-02-17 03:11:32
I won't provide a specific solution, since there are a few different ways of doing that depending on how exactly you want things to scroll or not scroll, so I suggest you start by reading about positioning and then layout in CSS:我不会提供特定的解决方案，因为有几种不同的方法可以做到这一点，具体取决于您希望滚动或不滚动的确切方式，因此我建议您首先阅读有关定位的内容，然后在 CSS 中进行布局：
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://developer.mozilla.org/en-US/docs/Web/CSS/position https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://css-tricks.com/almanac/properties/p/position/ https://css-tricks.com/almanac/properties/p/position/
Have fun!玩得开心！
解决方案2
0 2020-02-17 03:19:16
If your page is just divided into .Top and .content sections You can behave as follows如果您的页面只是分为.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>
解决方案3
-1 2020-02-17 03:08:19
Hope this help you.希望这对你有帮助。
::-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; } .Top { height: 10vh; float: left; width: 100%; } .content { height: 90vh; float: left; width: 100%; overflow-y: scroll; }
<div> <div class="Top"> Header </div> <div class="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动只显示部分元素 - Scroll only showing part of the element
iframe仅显示网站的特定部分，而不会滚动 - Iframe to show only a specific part of a website with no scroll
HTML页面的一部分必须滚动 - One part of my HTML page must scroll
如何使Flask滚动到页面的一部分？ - How to make Flask scroll to a part of the page?
如何使网页的一部分不随页面的其余部分滚动？ - How to make part of the webpage not scroll with the rest of the page?
滚动页面不只是div CSS - Scroll page not div CSS only
仅滚动页内元素，而不是整页 - Scroll in-page element only, not the whole page
粘性顶部菜单具有透明度（仅滚动文档的一部分） - Sticky top menu with transparency (scroll only part of the document)
是否可以仅使用链接滚动到HTML文档的任何部分？ - Is it possible to scroll to any part of HTML document using only link to it?
CSS：仅将滚动条添加到页面的“内容”部分 - CSS: Add scrollbar only to “content” part of page
相关标签