Scroll snapping at the end of the viewport just before reaching the final section of the page

I am curious about CSS snapping points (reference, browser support). My aim is to create a scrolling experience where the viewport snaps to specific points when reaching certain sections. The goal is for smooth scrolling until the second last section, then snapping into place aligning with the bottom of that section. To move past this snapped position, the user would have to surpass a particular threshold.

I have created a visual representation of my idea and I am hopeful that it can be achieved using the existing snapping-points specification.

https://i.sstatic.net/ZInds.png

htmlcsswebkitscroll-snap-points

Answer №1

Utilizing Alvaro Trigo's impressive library pagePiling, I was able to achieve the following:

http://codepen.io/anon/pen/NxaeZm

The structure of the content is as follows:

<div id="pagepiling">
  <div class="section pp-scrollable" id="section1">
      <p>Content that can be scrolled normally</p>
    </div>

    <div class="section" id="hidden">
      <p>Content that is not scrollable</p>
    </div>

    <div class="section pp-scrollable" id="section2">
      <p>Content that can be scrolled normally again</p>
    </div>

</div>

The middle section takes over the scrolling, and then you can seamlessly continue scrolling towards the second section, which behaves like a normal page once more. As for setting a threshold to access the middle section, that task remains open for exploration. Best of luck with your implementation!

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

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Find the initial element using the class name to retrieve the CSS properties

.class + p:first-child{ } The code above isn't functioning properly, unless it's an element instead of a class, like p:first-child. <div class="wrap"> <h3></h3> <div style="clear:both"></div> <p></p> & ...

csscss-selectors

Using a JavaScript code to integrate data input and dropdown menu selections

I am currently working on a data input section on my website. Users will need to enter their name in a text field and then select either "Yes" or "No" from a dropdown menu. Once they click on the 'Generate' button, all the information along with ...

javascriptjqueryhtml

Using a function within a map in SCSS looping

Forgive me if this question sounds trivial, but I am curious if it is achievable to generate a series of functions using a loop within a map in SCSS. The code snippet below unfortunately does not yield the desired outcome, however, it illustrates what I a ...

csssass

What is the best way to override a custom class-li element within another class-li?

I've just started learning HTML5 and CSS3, and I've encountered a challenge: Here is the code I have written so far: .custom-list ol { counter-reset: item; padding-left: 10px; } .custom-list li { display: block; } .custom-l ...

csshtml

What is the reason for needing to multiply all the numbers by ten in order to solve this floating point addition problem?

When dealing with floating point arithmetic in Javascript, it's common to see results like 0.2 + 0.1 = 0.30000000000000004, which can be confusing. However, a simple workaround is to multiply the numbers by 10, perform the operation, and then divide b ...

javascripthtmlfloating-pointprecisiontofixed

What is the method for updating the form action to alter the hash without causing a page reload?

My website is designed to show dynamic data based on the information following the '#' in the URL. Surprisingly, when I manually change this value in the URL, the page doesn't reload. However, if I modify it within a form on the site, the we ...

javascriptjqueryhtmlformshash

What is the best way to center a CSS box on the screen?

I am attempting to center the login box on the screen, but when using position: absolute the background color changes to white. /* all */ .patua_font { font-family: 'Patua One', cursive; } .Roboto_font { font-family: 'Roboto&apo ...

htmlcssbootstrap-4

Adjusting the width of speech balloon in CSS

This question might seem basic to those who are familiar with CSS (unlike me lol). I'm currently working on incorporating speech balloons into my website using this code from jsfiddle. However, I encountered an issue when the text inside the balloon i ...

htmlcsscss-shapes

Ways to stop grabber applications from identifying and saving mp3 files directly from the web browser

I am in the process of creating a music streaming platform that caters to both premium and free users. https://i.sstatic.net/J9gok.jpg As shown in the screenshot above, users with grabber apps installed on their browsers (such as IDM and other download a ...

javascriptphpjqueryhtmlaudio-streaming

What is the best way to anchor floating labels in React while incorporating Tailwind CSS?

I am currently working on developing a registration form using React and Tailwind CSS. As part of this project, I have implemented a feature where the label slides up when an input form is focused. Everything seems to be working fine up to this point. Howe ...

cssreactjsnext.jstailwind-css

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Can we incorporate modulo into the loop?

I have a JavaScript function with HTML code inside. I need the ".one-card" div to repeat four times within each ".row" div. The ".row" div is being repeated in a foreach loop. I want to check if the result of modulo (4) is not equal to zero, then display t ...

javascripthtmlmodulo

Issue occurred in ajax function when trying to present data in a form

I am encountering an issue while trying to fetch data from the database and display it in my form. The error message I'm getting is VM1704:1 Uncaught SyntaxError: Unexpected end of JSON input. In my PHP file, I have retrieved the data from the databas ...

phphtmlajax

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

What is the best way to achieve separation of concerns between HTML, CSS, and JS using this HTML structure? <nav role="navigation" class="site-nav js-site-nav"> <ul class="site-nav__list"> <li class="site-nav__item"><a href="#" ...

javascriptjqueryhtmlcssbem

Cease the act of sending submissions through JavaScript ajax requests

I need to prevent a form submission based on the result of an ajax request... Here is the code I attempted to implement: The chreg() function is supposed to return a boolean value from the ajax request, but it's not working! Javascript: function ch ...

javascripthtmlajaxsubmitreturn

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell

Maintaining aspect ratio while keeping images the same height and responsive

I have encountered a challenging issue that remains unresolved despite my extensive search for an answer. I have not found a solution in the "Questions that may already have your answer" section, nor have I discovered one elsewhere on the web. Here is the ...

jqueryhtmlcss