我希望有人能帮我解决这个问题…我都快抓狂了。我想创建一些水平滚动的部分。我看了Netflix的代码来模拟这个，我终于让溢出流一直流到浏览器窗口的边缘，行的开始和结束都与页面的空白对齐。但是现在当我滚动时，整个页面都会滚动。
我如何让这个部分独立滚动，同时仍然让溢出到达页面的边缘?仅仅使用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>你需要添加overflow-Y: scroll;到滑块类，如下所示。这告诉它需要的是滚动条，而不是整个文档。
这里是溢出的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(正如问题中提到的)，我不相信他们通常有滚动条，所以这将是针对滑动条的滚动条，你可能想要添加这样的东西:
/* 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 */
}
然而，出于可访问性的原因，通常不赞成隐藏滚动条，除非公然很明显，它是一个可滚动的元素;