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

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

jqueryhtmlioscssoverflow

Exploring the possibilities of device orientation in combination with 3D transforms

Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the proj ...

css3drotationfirefox-osdevice-orientation

Using CSS to duplicate images in multiple repetitions horizontally

In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, w ...

jqueryioscss

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Check out this link for more details: . I am looking to eliminate the slim vertical gaps between the images in html5 without resorting to using the table cellpadding="0" cellspacing="0". Any ideas on how to achieve this? ...

csshtmlimage

Maximizing the width of navbar elements with Bootstrap 3

I am currently working on building a webpage with bootstrap3, but I have encountered an issue with the navigation bar. I would like the navigation links ("Web Design", "Development", "Photography", "Blog") to be evenly spaced out within the horizontal na ...

csshtmltwitter-bootstrap-3navbar

The Gulp task is failing to generate the CSS file

Greetings! I have a task set up in my gulpfile.js as shown below: const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function(){ return gulp.src('sass/*.scss') .pipe(sass()) ...

csssassgulp

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using React components with Material UI to create styled div boxes

As I work on creating a mock website with React and Material UI, I have utilized the RaisedButtonExampleSimple component for buttons from Material UI within a div named App-Intro. Strangely, the text in the Div "Customer-Choice" is displaying above the but ...

htmlcssreactjsmaterial-ui

Issue with Ionic app on iPhone X not correctly detecting safe areas

Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...

cssionic-frameworkionic3iphone-xsafearealayoutguide

What makes styling the iconic Browse button (file input) such a challenge?

Many people are curious about how to style a file input in an HTML form, as evidenced by the plethora of well-known techniques available. However, I am more interested in understanding why we encounter such technical limitations that seem so trivial and fr ...

htmlcss

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

htmlcssflexbox

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

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 ...

javascriptjqueryhtmlcss

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

htmlcss

Move the button above a hyperlink in a Bootstrap carousel

Is there a way to add a top-right button on each slide that will be positioned over the carousel-control link? How can I achieve this design? Currently, the buttons appear under the carousel-control as shown below: .myButton { position: absolute; ...

csshtmltwitter-bootstrap

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

htmlcss

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom ne ...

javascripthtmlcsscookiesgoogle-chrome-extension

As the browser window is resized, the HTML div is causing the image to be clipped

Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...

htmlcssweb

Learn how to align elements in the Toolbar component using the package "@mui/material" version "^5.11.3"

Recently, I came across this example on their website: https://codesandbox.io/s/0f50jf?file=/demo.js I've been attempting to align all toolbar elements in the center using: sx= {{ justifyContent: 'center', alignItems: 'center&apo ...

cssreactjsmaterial-ui

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

jquerycsshtml-table