我做了一个网站,使用了 Bootstrap 4、水平滚动(通过jquery.mousewheel.js)和本地 CSS Snapping。我正在使用 Chrome 81,并不关心旧的或不支持的浏览器。
当我在 CSS 中应用 scroll-snap-type: x mandatory;
时,水平滚动停止工作(根本不会滚动)。如果删除 CSS 属性,则滚动行为正常。以下是我的 HTML 结构:
<div class="portfolio_content container-fluid h-100">
<div class="row h-100 flex-row flex-nowrap scrollx long_content">
<div class="col-12 h-100 project d-table" id="project1">
<div class="project_title d-table-cell align-middle">
<p>
Project 1
</p>
</div>
</div>
<div class="col-12 h-100 project d-table" id="project2">
<div class="project_title d-table-cell align-middle">
<p>
Project 2
</p>
</div>
</div>
<div class="col-12 h-100 project d-table" id="project3">
<div class="project_title d-table-cell align-middle">
<p>
Project 3
</p>
</div>
</div>
<div class="col-12 h-100 project d-table" id="project4">
<div class="project_title d-table-cell align-middle">
<p>
Project 4
</p>
</div>
</div>
</div>
</div>
CSS的关键条目在这里:
html, body {
height: 100%;
}
.portfolio_content .scrollx {
overflow-x: scroll;
}
.portfolio_content .long_content {
scroll-snap-type: x mandatory; /* Comment this to make scrolling works */
}
.portfolio_content .project {
scroll-snap-align: start;
}
.portfolio_content .project_title {
display: block;
margin: auto;
text-align: center;
}
.portfolio_content .project_title h1 {
font-size: 96px;
line-height: 0.8;
}
最后,这是JSFiddle演示。如果您在CSS中注释第9行,则可以滚动演示。
我的目标是允许“项目”DIV在滚动时捕捉,即滚动后将完全显示一个“项目”DIV。
我应该如何更改代码?
text-align: center
规则阻止了.project_title
中的文本显示? - kmoserscroll-snap-type
属性,它仍然无法滚动,因此看起来您的 CSS 存在问题,您需要先解决这些问题,然后再考虑滚动捕捉。 - kmosertext-align: center
注释掉,情况仍然没有任何改变。这个 CSS 属性只是为了说明问题,与问题本身无关。 - Raptor