当我只想滚动一个部分时，整个页面都会滚动

Question

我希望有人能帮我解决这个问题……我把头发扯掉了。 我想创建几个水平滚动的部分。 我查看了 Netflix 的代码 model 这个，我终于让溢出一直流到浏览器 window 的边缘，并且行的开头和结尾都与页面上的边距对齐。 但是现在当我滚动时，整个页面都会滚动。

如何让此部分独立滚动，同时仍让溢出到达页面边缘？ 仅使用 css 是否可行？

 body { background-color: #F5F5F5; }.row { display: flex; }.landing-banner { display: -webkit-flex; display: flex; height: 80vh; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; /* position: sticky; left: 0; */ }.content-block { margin: 0 4%; }.hero { font-family: "Apercu-Regular"; line-height: 40px; }.lolomoRow { margin: 3vw 0; margin-bottom: 10px; padding: 0; position: relative; outline: 0; z-index: 0; }.rowContainer { position: relative; z-index: 0; }.rowContainer.rowContent { padding: 0; box-sizing: border-box; }.slider { position: relative; margin: 0; padding: 0 4%; touch-action: pan-y; }.slider.sliderMask.showPeek { display: flex; flex-direction: row; overflow-x: auto; }.slider.sliderMask { padding-bottom: 1px; }.sliderContent { white-space: nowrap; }.slider.sliderMask.sliderContent.slider-item:first-child { padding-left: 0; }.slider.sliderMask.sliderContent.slider-item { box-sizing: border-box; z-index: 1; display: inline-block; position: relative; white-space: normal; vertical-align: top; padding: 0 2px; }.bd::-webkit-scrollbar { display: none; }.project-card { background-color: white; width: 400px; border-radius: 12px; box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12); margin-right: 16px; flex: 0 0 auto; }

 <body> <div class="landing-banner"> <wrapper> <div class="row content-block"> <h1 class="hero"> If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed. </h1> </div> </wrapper> </div> <wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;"> <h2>case studies</h2> </wrapper> <div class="slider"> <div class="sliderMask showPeek"> <div class="sliderContent row-with-x-columns"> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> </div> </div> </div> </body>

Answer 1

您需要添加溢出-Y：滚动； 到 slider class 如下所示。 这告诉它需要滚动条而不是整个文档。

这是溢出MDN 文档的 MDN 文档

 body { background-color: #F5F5F5; }.row { display: flex; }.landing-banner { display: -webkit-flex; display: flex; height: 80vh; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; /* position: sticky; left: 0; */ }.content-block { margin: 0 4%; }.hero { font-family: "Apercu-Regular"; line-height: 40px; }.lolomoRow { margin: 3vw 0; margin-bottom: 10px; padding: 0; position: relative; outline: 0; z-index: 0; }.rowContainer { position: relative; z-index: 0; }.rowContainer.rowContent { padding: 0; box-sizing: border-box; }.slider { overflow-Y: scroll; position: relative; margin: 0; padding: 0 4%; touch-action: pan-y; }.slider.sliderMask.showPeek { display: flex; flex-direction: row; overflow-x: auto; }.slider.sliderMask { padding-bottom: 1px; }.sliderContent { white-space: nowrap; }.slider.sliderMask.sliderContent.slider-item:first-child { padding-left: 0; }.slider.sliderMask.sliderContent.slider-item { box-sizing: border-box; z-index: 1; display: inline-block; position: relative; white-space: normal; vertical-align: top; padding: 0 2px; }.bd::-webkit-scrollbar { display: none; }.project-card { background-color: white; width: 400px; border-radius: 12px; box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12); margin-right: 16px; flex: 0 0 auto; }

 <body> <div class="landing-banner"> <wrapper> <div class="row content-block"> <h1 class="hero"> If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed. </h1> </div> </wrapper> </div> <wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;"> <h2>case studies</h2> </wrapper> <div class="slider"> <div class="sliderMask showPeek"> <div class="sliderContent row-with-x-columns"> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> <div class="slider-item"> <div class="title-card"> <div class="project-card"> <div class="row"> <img src="images/project previews/Circa.png" style="max-width: 100%"> </div> <div class="row" style="padding: 16px 16px 0 16px;"> <h3 class="project-title">Circa Resident App</h3> </div> <div class="row" style="padding: 0 16px 16px 16px;"> <p class="caption">Led end-to-end product design on Circa's customer facing app.</p> </div> </div> </div> </div> </div> </div> </div> </body>

如果您想在 Netflix 之后使用 model （如问题中所述），我不相信他们通常有滚动条，所以这将针对 slider 的滚动条，您可能想要添加类似的内容：

 /* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.slider {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 

然而，出于可访问性的原因，通常不赞成隐藏滚动条，除非它明显是可滚动的元素；