My website utilizes Bootstrap 4, horizontal scrolling (with the help of jquery.mousewheel.js), and native CSS Snapping. I am using Chrome 81 and do not concern myself with old or unsupported browsers.
The issue arises when I add scroll-snap-type: x mandatory; to the CSS - the horizontal scrolling ceases to function altogether. Removing this CSS property restores normal scrolling behavior. Below is the structure of my 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>
Here are the crucial entries in the CSS:
html, body {
height: 100%;
}
.portfolio_content .scrollx {
overflow-x: scroll;
}
.portfolio_content .long_content {
scroll-snap-type: x mandatory; /* Disabling this allows for scrolling */
}
.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;
}
Lastly, here is the JSFiddle demo. By commenting out line 9 in the CSS, the demo regains its scrolling functionality.
My objective is to ensure that each "project" DIV snaps into view when scrolling, displaying one complete "project" DIV at a time.
How can I modify the code to achieve this?