Navigate through the seamless elements with scroll snapping

I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported.

My attempt to add invisible elements as snap points within the container div caused issues with the size of the original item and resulted in a broken page layout due to the CSS constraints.

Is there a solution to ensure that a single wide element snaps to specific points while scrolling, even if it means adding invisible elements for this purpose?

<div class="container">
   <svg id="my-graph" width="10000px"></svg>
</div
cssscroll

Answer №1

Indeed, you can utilize absolutely positioned invisible elements to achieve this effect. Customize the container with scroll-snap-type: x mandatory; and adjust the hidden elements with scroll-snap-align: start;.

In the code snippet below, I have displayed the snappable elements for visibility so that you may observe their functionality.

body {
  font-family: sans-serif;
  font-size: 12px;
}
#d1 {
  width: 500px;
  overflow-x: auto;
  border: 3px solid blue;
  scroll-snap-type: x mandatory;
  position: relative;
}
#d1 svg {
  width: 1000px;
}
.black-stroke, #ticks {
  stroke: black;
}
.x-axis-text {
  text-anchor: middle;
}
.snappers>div {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  opacity: 0.3;
}
.snappers>div:nth-child(even) {
  border: 3px solid red;
  background: #ff000044;
}
.snappers>div:nth-child(odd) {
  border: 3px solid lime;
  background: #00ff0044;
}
.snappers>div:nth-child(1) {left: 0;}
.snappers>div:nth-child(2) {left: 100px;}
.snappers>div:nth-child(3) {left: 200px;}
.snappers>div:nth-child(4) {left: 300px;}
.snappers>div:nth-child(5) {left: 400px;}
.snappers>div:nth-child(6) {left: 500px; width: 500px;}
<div id="d1">
  <svg viewBox="0 0 1000 250" xmlns="http://www.w3.org/2000/svg">
    ...
  </svg>
  <div class="snappers">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

It is unfortunate that 

#ticks>path {scroll-snap-align: start;}
does not function as intended, as it would remove the necessity for the concealed elements.

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

How can I utilize JavaScript to seamlessly loop through and display these three images in succession?

My current code is HTML, CSS, and JS-based. I am looking to design three of these div elements that appear and hide in a loop every 3-5 seconds. After the first run, I want the execution to repeat continuously. How can I modify my code to achieve this func ...

javascripthtmljquerycssloops

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design

What is the best way to center-align elements?

I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...

htmlformscssflexbox

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

javascripthtmlcssdom

User interface for creating a platform resembling Product Hunt or Reddit

I am currently developing a web application similar to Product Hunt. The back-end API is up and running smoothly, and I have successfully implemented AngularJS for the front-end. However, I lack experience in designing the look and feel of the site. Shou ...

cssangularjstwitter-bootstrap

Having trouble applying overlays to list items with CSS

I'm currently working on a grid gallery where I've set the List items to be 20% wide so there can be 5 in one row using float:left. Now, I'm trying to add an overlay effect by using a div with the class "overlay" so that when someone hovers ...

css

Having trouble retrieving my .scss bundle file from a different directory

I am trying to access my .scss file that imports all the other .scss files (they are all imported in styles.scss). Even though I have added the path to my angular cli file, the file is still not accessible and no styling is being applied to my html elemen ...

cssnode.jsangularsassangular-cli

Issue with CSS in Internet Explorer 7

CSS CODE: .search { float: left; width: 100%; display: block; } .search ul.tabs { height: 23px; margin-top: 50px; padding: 0px; } /* FF ONLY */ .search ul.tabs, x:-moz-any-link { height: 26px; margin-top: 50px; padding: 0px; } .search ul.tabs ...

htmlcss

The div is repositioned without the use of padding or margin properties

I am facing an issue with my Next.JS application where a div is not aligning properly at the top of the page. Despite setting padding and margin to 0 for body, HTML, and the div itself, it seems to be slightly off. I have checked all components thoroughly ...

htmlcssnext.js

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

javascripthtmlcssslideshowtransition

Difficulty Aligning Angular Material Expansion Panel with mat-nav-listI am facing an issue with

Currently, I have implemented a mat-nav-list to showcase the Menu items on my webpage. However, there seems to be an alignment issue with the 4th Menu item which is an Angular Material Expansion control. Refer to the screenshot provided below for clarifica ...

htmlcssangularangular-material

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...

javascriptcssreactjsmaterial-uijss

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

javascripthtmljquerycssbootstrap-4

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

javascriptjquerycss

How can I consistently position a dialog box (tooltip) on top of a JQuery UI modal Dialog?

Utilizing CSS and Javascript to display tooltips upon mouseover for various inputs has been effective in most cases, however I am encountering an issue with inputs within a Jquery UI Dialog modal. The tooltips appear correctly in front of the dialog when i ...

jquerycssjquery-ui

Ways to resolve the issue of iOS Safari showcasing 'a' tag styling differently compared to other browsers

Here's a simple question for you. Take a look at the images below for reference. Check out the iOS Safari browser on my phone https://i.sstatic.net/o9jOe.jpg and compare it to my desktop browser, both screenshots were taken live from the server. ...

htmlcssiossafari

Resize images within a button using table cell size in Bootstrap

I am looking to create a row of buttons within a table, where each button is represented by an image and has a transparent border/background. To achieve this, I placed each button in one of the 10 remaining cells of a table using <td class="col-sm ...

htmlcsstwitter-bootstrapbootstrap-5