Horizontally Scrolling Panes with clean HTML, modern CSS and no JS
This used to be a really hard problem, new CSS tools make it simpler. Here’s how it works…
Samsung Internet Developers
Update (09/23/2020): an experimental feature called scroll-snap-stop makes the user experience of this even better, the article has been updated accordingly.
Isn’t it nice when the tools you work with get better and better when you’re not looking? That’s what it feels like working in the Web some days.
Many years ago when I was still a front-end engineer on real products, I helped maintain a very popular newspaper site. It was one of the very early Web Apps designed to be responsive and touch first.
Since it was a newspaper the aesthetic had pages sat next to each other which could be swiped between with a flick of a finger.
It was a huge hack to implement this. It involves significant amounts of JavaScript and some really awkward HTML. It was flaky and sometimes suffered from poor performance, since we had to constantly track user input.
I tried remaking it for a project today and I was able to build the whole thing with only CSS!
Step 1
We have 3 <article> which will contain our content.
We have a <nav> with 3 links, deep linking to the content we don’t want to break this behavior since it is useful for people who can’t scroll in two dimensions such as people using a mouse.
Step 2
Layout the <article> elements horizontally.
We will use CSS Grid to do that, the Grid should have the following properties.
- New elements make new columns
- Each column is the width of the available space
- Each column fills the remaining height of the page
We will set the width and the height of the body and the html elements so that they fill the viewport.
Then we will layout our header our nav and our main using CSS Grid on the body
This makes the header and nav as small as possible ( min-content ) and gives the rest of the space to the main .
Now for the <article> elements. We will make another Grid on <main> to say they should all be laid out side by side each one taking up 100% of the width of the parent.
We tell main to display with grid as before, we will set the the rows to take up all available space but we won’t set the number of columns since we could have any number of children. Instead we use grid-auto-flow: column; to tell it to add new columns when ever a new one has to be added and grid-auto-columns: 100%; to tell it that each new added column is 100% of the parent’s width.
Finally we will make it scroll by adding overflow-x: scroll; so that a scroll bar will always be present on that element and to allow it to scroll horizontally.
Step 3
This is okay but not really usable. We want to be able to scroll just the main element and to have the panes snap into place as the user scrolls. Thank fully there is a CSS API for this: CSS Scroll Snap which has really good support across browsers.
To use it we configure the parent’s scroll-snap-type and add snap points to it’s descendants using scroll-snap-align .
We’ve made it scroll in the x direction, and set scroll-snap-type to mandatory so that it will always snap into place no matter where in the scroll it is.
Mandatory snapping can feel a little aggressive so you may choose to set it to proximity instead so that it only snaps near the edges, this may give a better experience on smaller screens but doesn’t guarantee lining up and the user can place the it such that the border between panes rests in the center of the screen.
Updated 09/23/2020: In some browsers the scrolling has a lot of momentum letting a quick flick scroll through many pages, which can be a frustrating user experience. To resolve this we use an experimental feature called scroll-snap-stop: always; so that it always stops on the next page. Greatly reducing the frustration whilst navigating between pages. [scroll-snap-stop on mdn]
This is almost ready, the deep links in the <nav> still work but the instantaneous jumping to the pages when a nav item is clicked is a poor user experience. To fix that we will add scroll-behavior: smooth; so that when we click on the nav links we get a smooth scroll to the selected page. This has no additional effect when the user is dragging with a finger or using a scroll wheel.
To Read Next
This demo is good, but can be polished a little more with some JavaScript, the next article adds a few additional features with Intersection Observer.
Scrollbar in HTML
By 
Priya Pedamkar
Introduction to Scrollbar in HTML
A horizontal or vertical bar that is used to move a viewing area in a window, up, down, left or right using a mouse or a touchpad or a keyboard. You can click on the track to get the scroll bar to a specific portion of the window or click on the bar and drag the bar to a specific location. Below is a screenshot of a scroll bar to help you understand more.
Web development, programming languages, Software testing & others
The above image is of our typical word document with its default vertical scroll bar. The bar, also sometimes called the handle, is used to drag the viewing area of a window. And the area on which our bar slides is called a track.
Often there are default scroll bars present on your window whether the information the window contains is overflowing or not. But nowadays, these scroll bars are made interactive; that is, if and when the information becomes overflowing, a vertical or/and a horizontal scroll bar appears.
In this article, we will try and create scroll bars or, should we say, interactive scroll bars using simple HTML.
HTML || Scroll Bar || Over Flow
HTML has a way around anything you could think of, and if not, then with the help of CSS properties, HTML makes sure you get your desired results. One such CSS property is called the ‘overflow’ property that is applied to a <div> tag. The ‘overflow’ property can be used in many ways, but we will elaborate on two of such ways in this article.
What is the Purpose of ‘Overflow’ Property in Scrollbar in HTML?
The ‘overflow’ property helps you decide that you should provide your information or data, or content overflows from your element box, like some content enclosed in a <div> tag, what needs to be done. This property helps you decide whether to show or not to show your overflowed content or mask it using scroll bars for convenient use of the content that is big for a specified visible area.
However, the ‘overflow’ property is used and is effective with content that is a block element with a specific height. The ‘overflow’ property is supported by almost all web browsers as well. The syntax is pretty simple for using this property.
Syntax:
overflow: scroll |auto|visible|hidden|initial|inherit;
From the above options, one can use any one of these values for the overflow property. One of the applications of overflow property is with <div> tags, which, when used, creates a scroll box.
Let’s learn about Scrollbox.
HTML || Scroll Bar || Scroll Box
A scroll box in HTML is simply a box that is if and when in use has its own scroll bars. So if one puts his information or passage inside the scroll box, he does not need to worry about the scroll bars since they will be available at his disposal along with the scroll box.
Example of scroll box crated in HTML:
Usually, a scroll box is obtained with the usage of the <div> tag, and the customization for the bar is done using CSS properties. While creating a scroll box, we use a CSS property known as ‘overflow’ and set it to ‘scroll’ to let the browser know that it is to add the horizontal and vertical scroll bars.
Below is a simple and basic example code for an HTML scroll box with overflow:scroll.
There is a ‘div’ element using ‘overflow:auto’ for creating scroll bars.
This results in the explicit appearance of a scroll bar. The result you can observe in the below picture.
As we saw earlier, the ‘overflow’ property has few values that can be used. Above is an example of ‘overflow:scroll’. Others are shown below:
‘overflow:auto.’
It creates the same effect as overflow:scroll, but with overflow:auto, a scroll bar will only appear IF the data is overflowed; otherwise, the scroll box will appear without any scroll bars.
Both the above images are using overflow property with ‘auto’ as its value. Note that the first image has a scroll bar, whereas the second image does not have one. This is the basic function of the ‘overflow:auto’ property; that is, a scroll bar will only appear IF there is some data that is overflowing.
‘overflow:hidden’
This property has a special purpose. Even if some data is in an overflowing state, overflow property with value ‘hidden’ will contain it inside the window and do not let the user know. Observe below.
Observe that, though there is no scroll bar and the data is overflowed, yet it is perfectly contained inside the visible area. ‘Overflow:visible’ has the opposite effect. It shows the overflowed content, and the content displays over the visible window.
Apart from applying the ‘overflow’ property to a <div> tag, another attribute can be used, the <iframe> tag. Syntax and basic code for <iframe> is given below:
<iframe> tag uses overflow property with three basic values: scrolling: yes|no|auto. As the values suggest, ‘scrolling:yes’ provides scroll bars to the frame. ‘scrolling: no’ do not provide the frame with any scroll bars and ‘scrolling:auto’ provides scroll bars IF the content or data is overflowed.
Below are three images with different values assigned to attribute ‘scrolling’.
Thus we saw two different methods to add scroll bars, explicit or default.
> One was with the use of the ‘overflow’ property that is usually applied to <div> tags.
> And the second was the ‘scrolling’ attribute that is applied to <iframe> tags.
Both serve the same purpose of adding a scroll bar to your visible content.
Recommended Articles
This is a guide to Scrollbar in HTML. Here we discuss a brief overview of Scrollbar in HTML and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
How do you add a scroll bar to a div?
I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don’t want the popup to be too long).
9 Answers 9
You need to add style=»overflow-y:scroll;» to the div tag. (This will force a scrollbar on the vertical).
If you only want a scrollbar when needed, just do overflow-y:auto;
Css class to have a nice Div with scroll
to add scroll u need to define max-height of your div and then add overflow-y
so do something like this
If you want to add a scroll bar using jquery the following will work. If your div had a id of ‘mydiv’ you could us the following jquery id selector with css property:
If you have a CSS file, you can define a call for the <div> element and assign the overflow: auto CSS property.
In the HTML file: <div >
In the CSS file you put:
There are multiple ways to achieve a scroller on a div, here find a simple easy way one with an easy explanation .
Here is a bit explanation of the above code.
The overflow-y property of CSS adds a scroller when needed, If we want to add the scroller after a specific height (e.g 100px in our case) Then,
We add the max-height property of CSS so for example to add a scroller after 100px of height then max-height: 100px; is used.