Pause the scrolling action of the user once a specific point is reached using Javascript

As I work on creating a page that showcases various types of media predominantly consisting of images and videos, I have encountered a challenge. I am striving to prevent users from scrolling too far past the displayed media. My goal is to ensure that when a user scrolls down to view the next media object, once it reaches the center of the screen, the scrolling should briefly pause to avoid overshooting.

I attempted to implement a solution found at

However, it seems to function correctly only for the first div element...

Below is the code snippet:

.scroll-snappers,
.snapit {
  height: fit-content;
}

.scroll-snappers {
  scroll-snap-type: y mandatory;
}

.snapit {
  scroll-snap-align: start;
}
<script src="https://rawgit.com/ckrack/scrollsnap-polyfill/develop/dist/scrollsnap-polyfill.bundled.js"></script>
<div class="scroll-snappers">
  <div class="snapit">
    <img src="https://i.imgur.com/iNku1gA.jpg" height="500" />
  </div>
  <div class="snapit">
    <img src="https://i.imgur.com/iNku1gA.jpg" height="500" />
  </div>
  <div class="snapit">
    <img src="https://i.imgur.com/iNku1gA.jpg" height="500" />
  </div>
  <div class="snapit">
    <img src="https://i.imgur.com/iNku1gA.jpg" height="500" />
  </div>
</div>

javascripthtmlcss

Answer №1

Implementing overflow:scroll; and height:90vh; css attributes to the .scroll-snappers can resolve the issue.

.scroll-snappers {
    scroll-snap-type: y mandatory;
    overflow: scroll;
    height: 90vh;
}

Check out this CodePen link for reference.

It's important to note that the scrolling element should align with the scroll-snap-type property, rather than using html as the scrolling element.

This is an intriguing discussion.

edit

An easier alternative solution:

html {
  scroll-snap-type: y mandatory;
}

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

Tips on accessing the returned value from the controller within a JSP page using Ajax

This is a snippet of my JavaScript code: <script type="text/javascript"> function callMe() { var districtId = $("#district").val(); alert(districtId); $.ajax({ type: "POST", ...

javascriptajaxspringjsp

I'm encountering an issue with the React state where it seems to be endlessly nesting

I am new to React and I seem to be encountering an issue where every time I trigger a click event, the state object continues to nest. The code snippet below is part of the App component. const [state, setstate] = useState('') useEffect(() =& ...

javascriptreactjs

To Default or Not to Default: Dynamic Imports in React Router 3 for Webpack Code-Splitting

Lately, I've been focusing on upgrading my project from webpack 3 (v. 3.3.0) to webpack 4 (v. 4.44.2). Building and compiling went smoothly, but for some reason, nothing was being rendered on the screen. Upon comparing the parameters passed to Router ...

javascriptreactjswebpackreact-router

Output PHP variable in JavaScript (and show the value within an iframe)

I'm trying to retrieve a value from a MySQL database using PHP, store it in a variable, output the PHP variable in JavaScript, and then display the value in an iframe. However, I'm having some trouble getting it to work... Here is my PHP code: ...

phpjavascriptiframe

Browser resize affects the overlap of DIVs

I've seen similar posts before, but I believe the issue with my website (***) is unique. At full size, the website looks exactly how I want it to. However, when I resize the browser window, the text ("ABOUT INTERNATIONAL PARK OF COMMERCE.." and below ...

htmlcsswordpressoverlap

"Troubleshooting Dojo Drag and Drop Problem: Transformation of Data into JSON Format within the Destination Container

I am working with two DND containers, SourceContainer and TargetContainer. The SourceContainer contains some JSON data as shown below: Apple Orange Banana This JSON is being used: var json = {"fruits": [ {"fruitId": 1, "fruitName": "Apple", ...

javascriptjsondojodrag-and-drop

"Dealing with Angular .map() function returning an empty array or displaying error messages

I'm encountering two issues while attempting to display data from my API call using the following code... API Call: getProducts(id: number) { return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe( switchMap(token => { ...

javascriptangulartypescriptionic-framework

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

javascriptjqueryhtmljson

Is there a way to dynamically retrieve a list of sheets from a spreadsheet using the Google Sheets API in a React application?

How can I retrieve a list of all sheets in the Google Sheet below? Take note of the parameter ranges=${sheet}. The current code is set up to fetch data from a single sheet. However, my goal is to create a dynamic call by obtaining a list of all available ...

javascriptreactjsgoogle-sheets-api

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

What is the best way to incorporate a label onto the border of a div while ensuring responsiveness?

I am struggling to design a straightforward appreciation screen with bordered text. The current css I have does not adjust responsively when the screen size changes, causing it to appear misaligned. Below are my CSS and component codes. React JS is being u ...

htmlcssreactjs

What causes a globally declared array to remain empty in the global scope even after data is pushed to it within a callback function?

Initially, I set an empty array as the value for the global variable artistURLs. Then, within the Cheerio .each() iterator method, I push strings (stored in the local variable artistURL) into the artistURLs array. var request = require('request&apos ...

javascriptnode.jsrequestcheerio

What is the process for running a script during partial view rendering?

My view is strongly typed to a CalculateModel where a user inputs information and then makes an ajax post to the controller. The controller performs calculations using this data and returns a PartialView strongly typed to the ResultCalculateModel. The Res ...

javascriptajaxasp.net-mvc

CSS for button positioning inspired by game controller layout, built to be responsive

Is there a way to arrange these 4 buttons in a layout resembling a game controller? Currently, they are displayed like this and I want them to be centered at the bottom of the screen, smaller, and responsive. What changes should I make? Would using #contro ...

htmlcssbuttonresponsive-designresponsive

Looking to tally a value every time a checkbox is checked within the onchange function

Hey everyone, I'm working on adding a priority number when a checkbox is checked using the onchange function. When a checkbox is checked, it should be marked as 1. I have a list of checkboxes within a div, and when one checkbox is checked, it should b ...

javascriptjquerycheckbox

Tips for retrieving the return value from a function with an error handling callback

I am having an issue with my function that is supposed to return data or throw an error from a JSON web token custom function. The problem I am facing is that the data returned from the signer part of the function is not being assigned to the token const a ...

javascriptnode.jstypescriptasynchronousjwt

Utilize jQuery's animate method to scroll to the top after toggling a class in Vue

I am in the process of developing a FAQ page using vue.js Here is what I have implemented so far: <li v-for="i in items | searchFor searchString" v-on:click="toggleCollapse(i)" :class="{ collapsed: i.collapse, expanded: !i.collapse }" > <p> ...

javascriptjqueryclassvue.jsjquery-animate

Modify the fluid containers on a webpage seamlessly without any gaps

I'm working on aligning multiple divs with dynamic content of varying height on my page. Here's how the divs are currently designed: I would like to achieve a design like this using CSS: What modifications can be made to the CSS for the DIV to ...

htmlcssheight

ng-select will solely output the term 'collection'

i am having an issue with a ng-select in my contact form. everything is being received correctly except for the value of the ng-select. Instead of getting the selected option from the ng-select, the system just returns the word "array". Below is the port ...

javascriptphpangularjs

Express.js Issue: Error in JSON Object Returned When Date Parameter is Empty

Currently tackling the challenges of the FreeCodeCamp Timestamp Microservice project and facing a roadblock in the implementation. While most requirements are met successfully, there's an issue with handling an empty date parameter test case. Let me b ...

javascriptnode.jsjsonexpress