When the mandatory option is chosen, the scroll snap type acts similar to proximity by enforcing

My goal is to have the main hero section of the website take up the entire screen, and when the user scrolls down, they are immediately brought to the main content with the hero section no longer visible. However, I am experiencing an issue where if I do a smaller scroll, the hero section remains partially on the screen while the main content is also partially visible. This happens especially when using a trackpad on a laptop, as different scrolling techniques seem to affect the snap behavior.

In summary, the scroll snap feature sometimes behaves more like proximity snapping rather than the mandatory snapping that I have set it to.

I have tried various combinations of containers and CSS properties, but I can't seem to achieve the desired effect. Ideally, I want users to only see either the full hero section or the main content, without any partial views. Below is the HTML structure and CSS code that I have been working with:

HTML

<body>
     <div class='hero'>
         HERO HTML
     </div>
     <div class='maincontent'>
         MAIN CONTENT HTML
     </div>

</body>

CSS

body {
    width: 100%;
    height: 100vh;
    position: relative;
    scroll-behavior: smooth;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
}

.hero {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
}

.maincontent {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    overflow: scroll;
}

Answer №1

Here is a suggestion you can try:

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow: auto;
}

section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border: 1px solid #ccc;
}

.hero {
  background: #0074D9;
  color: white;
}

.maincontent {
  background: #FFDC00;
}

/* You can also customize styles for each section here */
<body>
  <div class="container">
    <section class="hero">
      HERO HTML
    </section>
    <section class="maincontent">
      MAIN CONTENT HTML
    </section>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to mix units within the 'path' element in SVG?

Utilizing SVG's rectangle element, you can specify dimensions as a percentage of its owner's dimensions and set a radius in pixels. By using the code below: <div style="position: relative;"> <object class="AIRound" t ...

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

Looking to implement URL navigation based on a selected value from a dropdown menu when the onClick button is pressed

I am struggling with getting the Go Button to navigate to a specific URL like "&age=10" without selecting it. I require assistance with creating code that will allow me to redirect to the URL with post URL variables for my WordPress site. ...

Calculating values within dynamically generated elements requires utilizing JavaScript to target and extract the

I am working on creating input fields inside an HTML table using Vue.js. On click of a button, I want to perform some calculations based on the input values. However, it seems that the calculations are not happening as desired. What I have attempted so fa ...

What could be preventing the application of my skew via -ms-filter matrix in Internet Explorer?

After working on developing a website using Chrome and Firefox, I've come to realize that it appears broken when viewed on Internet Explorer. Fixing the issue is turning out to be more challenging than I had initially anticipated. The primary problem ...

Transforming React drag and drop page builder state into a functional html, css, and js layout

Currently, I am in the process of developing a drag and drop UI builder for react-based app frameworks. Before incorporating drag and drop functionality, my main focus is on rendering a page layout based on a structured array stored in the state. https:// ...

Troubleshooting a problem with the transition of the hamburger menu icon in SC

I'm encountering an issue with the transition property and attempting to utilize the all keyword. After including a fiddle, I can't seem to figure out if I've made a simple mistake or if there is something else going on. I have seen the all ...

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() { if (confirm("Press a button!") == true) { if(this.style.backgroundColor == "white") this.style.backgroundColor = "yellow"; else if(this.style.backgroundColor == "yellow") this.style.backgroundColor = "red"; else i ...

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

Unable to successfully submit a form using PHP

I am currently working on a PHP page that retrieves data from MySQL. The goal is to fetch a list of objects from the database, display each object in a separate form for editing, and then save only the edited values. However, I am encountering difficulties ...

Can the jQuery live function be triggered without the need for an event?

Using the live function in jQuery requires an event to trigger it. More information can be found in the official API documentation. $(".xyz").live('event', function(){ }); I am trying to make the above function run as soon as the dynamicall ...

Enhancing the menu/navigation bar with individual AJAX loaders

I have chosen the Vivant Designs theme for our website, which can be found at What I am looking to achieve is an ajax loader that will appear next to the link or tab when a user clicks on a link within the drilldown menu located on the left side. The cont ...

CSS inline-block element disregarding margins and padding

Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Currently, I am attempting to implement the code for ramjet from . However, I am facing an issue where element a does not disappear when transitioning into b. Additionally, I am encountering an error message "--Uncaught TypeError: Cannot read property &apo ...

Transfer file content by dragging and dropping it onto a TextArea when an anchor tag is dropped

Within my application, there are 2 textareas with corresponding code implementing "dragover" and "drop" listeners for each one: // for dragover handleDragOver : function (evt) { var self = this; evt.preventDefault(); console.log ( ...

Boosting Your Theme - Eliminating Redundant Styles

Currently, I am facing more of a best practice issue rather than a coding one. I am in the process of creating a custom bootstrap theme inspired by https://github.com/HackerThemes/theme-kit. Although I have a functional theme that I am satisfied with, I am ...

How can Angular be used to dynamically show or hide an element based on its height?

Is there a way in Angular to display a "Read More" link once the height of a paragraph reaches 200px? I'm looking for an elegant solution. Here are my elements: <section class="mynotes" ng-if="MyController.mynotes"> <p ng-bind="MyController ...