how to make a web page scrollable

Awards Season
Big Stories
Pop Culture
Video Games
Celebrities

Mastering HTML Code: A Step-by-Step Guide to Creating a Web Page

Are you interested in creating your own web page but don’t know where to start? Look no further. In this step-by-step guide, we will walk you through the process of using HTML code to create a web page. HTML (Hypertext Markup Language) is the backbone of every web page, and understanding how to write and manipulate it is essential for anyone venturing into the world of web development. So, let’s dive in and become masters of HTML code.

Understanding the Basics of HTML

Before we jump into writing code, it’s important to understand the basics of HTML. HTML is a markup language that uses tags to structure content on a web page. Each tag serves a specific purpose and tells the browser how to display different elements such as headings, paragraphs, images, and links.

To start creating your web page, open any text editor (such as Notepad or Sublime Text) and create a new file with an .html extension. This will be your working file where you’ll write your HTML code.

Structuring Your Web Page

The structure of your web page is crucial for both organization and search engine optimization (SEO). The basic structure consists of an opening tag followed by

and tags. The section contains meta-information about your web page while the actual content resides within the section.

section, you can use various tags to structure your content such as headings (

Adding Elements to Your Web Page

Once you have structured your web page, it’s time to add elements such as images, links, and tables. To insert an image, use the tag with the source attribute pointing to the URL or file path of the image. Similarly, to create a hyperlink, use the tag with the href attribute specifying the destination URL.

Tables are useful for organizing data on your web page. Use the

How to create content area scrollable instead of the page using CSS ?

Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below.

visible: The property indicates that it can be rendered outside the block box and it is not clipped.
hidden: This property indicates that the overflow is clipped. The rest of the content will be invisible.
auto: If overflow is clipped, then automatically a scroll-bar is added for the rest of the content.
scroll: This property indicates that the scroll-bar is added to see the rest of the content if it is clipped.
initial: This property sets to its default value.
inherit: This property inherits the property from its parent element.

We can disable page scrolling by setting body overflow property to hidden .

In both the examples, we will be using this property to disable the page scrolling.

Example 1: In this example, we use overflow: scroll property to make “div” vertically and horizontally scrollable.

Example 2: In this example, use overflow:auto; to make “div” vertically and horizontally scrollable.

Note: You can enable only vertical scrolling by setting overflow-y to scroll and auto and overflow-x to hidden .

Similarly for horizontal scrolling, set overflow-x to scroll or auto and overflow-y to hidden .

Example 3: This example is used only for vertical scrolling of content area.

Please Login to comment...

CSS-Questions
Web Technologies

Please write us at [email protected] to report any issue with the above content

Improve your Coding Skills with Practice

Showcase a Scrollable Website page

How can you best feature your website design portfolio? Here’s a great option using CSS. Create a scrollable page by just using an image block and a couple of CSS Codes. Please watch the video below to view the guided tutorial.

Kindly watch the video below for a walkthrough.

Please refer to the codes below as mentioned in the video above.

Paste the code below to Design > Custom CSS

To customize the scrollbar

Want to add stylish and unexpected features in your Squarespace site?

Easily create this stylish vertical tab feature..

I am the creative entrepreneur behind The Artist Scientist. I have a knack for handmade yet minimalist designs and work with business owners in crafting their visual identities

Add Multilingual Translator to Squarespace: Powered by Google Translate

Easy workarounds for squarespace member area.

New NPM integration: design with fully interactive components from top libraries!

The 4 Types of Creative Website Scrolling Patterns

Creative scrolling patterns let you adjust the pace, delivery, and interactivity of the content. Considering that our attention span on the web has dropped to about 8 seconds , a delightful scrolling experience certainly prolongs user interest.

In this post, we’ll examine the most common and time-tested scrolling pattern. As explained in the free e-book Web UI Patterns 2016 Vol.1 , each pattern is creative yet proven usable through years of refinement.

UXPin helps you build interactive, scrollable prototypes even on trial. Try UXPin and all its advanced features for free. Sign up for trial .

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

What are Scrolling Patterns?

Scrolling patterns are the various ways content is presented to the users as they scroll down a web page. Scrolling patterns influence how users engage with the content and how they feel about it.

Choosing the right scrolling pattern depends on the nature of the content, the user experience you want to create, and the specific goals of your website or application. A thoughtful selection of scrolling patterns can enhance engagement, guide user navigation, and contribute to a positive overall user experience.

Types of Scrolling Patterns

Here are some common scrolling patterns:

Traditional or Sequential Scrolling – This is the most common scrolling pattern where users scroll vertically through content in a linear manner, one section at a time.
Infinite Scrolling – New content continuously loads as users scroll down. It’s often used in social media feeds and content-heavy websites.
Parallax Scrolling – It creates an illusion of depth by moving background and foreground elements at different speeds as users scroll.
Fixed or Sticky Elements – In this pattern, certain elements, such as navigation menus or headers, remain fixed in place as users scroll.
Carousel or Slider – They allow multiple pieces of content to cycle through horizontally as users scroll. They’re useful for presenting a variety of information in a limited space.
Full-Page Scrolling: Each scroll action takes users to a new full-page section, often with unique visual designs or interactions. It’s often used in portfolios or promotional websites to create a visually impactful experience.
Scroll Snap: Scroll snap ensures that the page automatically aligns with defined points or sections as users scroll, creating a more controlled scrolling experience.
Minimal Scrolling: In this pattern, the content is presented on a single screen without requiring users to scroll. It’s often used for landing pages with minimal content or single messages.

Long Scrolling

A site has so much eclectic content that a multi-page format would be too difficult to navigate.

A site wants to tell a story in a smooth, linear fashion.

Create a single-page, long-scrolling site to consolidate your content in a single place. This works great for social media sites and others with user-generated content, where part of the fun is browsing through everything all at once, and the content is diverse and difficult to categorize because it’s always updating.

The prominence of mobile browsing supports the long scrolling pattern since smaller screen sizes call for more scrolling.

Combined with the infinite scrolling pattern described below, long scrolling can create a completely immersive browsing experience. If users are searching for something in particular, a more structured navigation system like Amazon ’s works better — but for explorability, long scrolling is the fastest and most fun for users.

Use sticky navigation. Disorientation and the inability to go back are the innate drawbacks of long scrolling, but a fixed menu allows users to move freely.
Long scrolling can have a negative effect on SEO .
Don’t autoplay heavy media like videos, since in abundance they drastically slow down loading.
You don’t have to commit to a single-page format with long scrolling: often sites feature a central long-scrolling home page that links out to traditional secondary pages, like Facebook and Twitter’s separate profile pages.
For one-off long scrolling on specific page sections, try the fixed technique described below.

Fixed Long Scrolling

Squarespace

A site could benefit from the advantages of long scrolling but doesn’t want to convert entirely from a multi-page structure.

Fixed long scrolling sites display information that might otherwise require multiple sections within one long-scrolling section. The effect feels like a “scroll within a scroll”.

When deciding what to include in a fixed scroll section, make sure you only choose content that fits within a unified theme or category. Each part of Squarespace’s fixed scroll section, for example, focuses on explaining how to “Create a beautiful website” for different business types.
Place CTAs in at the end of each of each fixed-scroll frame.
As the UXPin product tour page shows, you can also consider adding a “scroll progress bar” to the top navigation. The pattern helps add a greater sense of pace if you have more than 3-4 frames.

Infinite Scrolling

Content is better organized on a single page, but there’s too much to load all at once.

With the infinite scrolling pattern, content is loaded as needed to provide a more paced experience. Infinite scrolling proves useful for single-page sites with more than a few screens worth of content, especially with multimedia galleries.

Infinite scrolling creates a rhythm for social media sites, where users are continually entertained with new content without clicking or waiting.

The problem with infinite scrolling is when users lose their place, though there are ways around this. Sticky navigation is the best way to give your user mobility in a near-infinite sea of content.

In addition to sticky navigation, there are other methods to help infinite scrolling’s disorientation. A jump-to-section option, as with Tumblr, lets users return to the start if they become lost.
Infinite scrolling can be combined with pagination for more accurate searches. For example, Facebook allows users to search timelines by year.
Don’t be constrained by the traditional loading circle — your choice of icon is an opportunity to deepen your site’s identity. Facebook, Tumblr, Imgur, and others all have custom loading signifiers.

Tasteful Parallax Scrolling

The Walking Dead

Oakley: Airbrake MX

The Boat (SBS)

Users are not engaged enough in long scrolling formats.

Give your long scrolling site more impact with a parallax effect. Known to the video game industry for decades, this pattern refers to the layers of a two-dimensional image moving at different speeds when scrolling, i.e., the foreground and background moving at different speeds, or differing layers of the background. The effect creates a mesmerizing three-dimensional feel.

The parallax effect unlocks the more creative aspects of scrolling, especially when combined with scroll-triggered animations. This style lends itself to storytelling sites, building a more immersive and stimulating experience with better visuals.

The Walking Dead uses parallax and other scrolling techniques (i.e., atypical direction since the frames move left to right as you scroll down) to deepen their narrative. While not necessary, the differentiated backgrounds make just watching the scroll more enjoyable. It also makes sense for the context of the site since the character react to the scroll.

For help on coding for parallax sites, read Dave Gamache’s piece on Medium .
Be careful of loading times. A simplified fast site is still better than an extravagant slow site.

Create scrollable prototypes in UXPin

Apply what you’ve just learned in practice and build an interactive prototype that works like a real product. Use UXPin, build prototypes up to 10x faster, share them with your team, and streamline developer’s handoff by having them easily translate your design into code. Try it now .

Build prototypes that are as interactive as the end product. Try UXPin

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

No credit card required.

These e-Books might interest you

Design Systems & DesignOps in the Enterprise

Spot opportunities and challenges for increasing the impact of design systems and DesignOps in enterprises.

DesignOps Pillar: How We Work Together

Get tips on hiring, onboarding, and structuring a design team with insights from DesignOps leaders.

We use cookies to improve performance and enhance your experience. By using our website you agree to our use of cookies in accordance with our cookie policy.

How to make a div vertically scrollable

Free System Design Interview Course

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2023 with this popular free course.

Let’s imagine a scenario that you might have encountered while writing HTML codes.

A situation might occur where you have the whole width of the screen available for taking, but not the whole height. Say you have a large chunk of text you wish to embed into your page. You can easily do that if the div that will contain the text is vertically scrollable .

A common use case of this is the embedded code windows on pages where a certain height has been set for the div and the code line exceeds this height. The code window in this kind of situation is usually made scrollable.

How to make HTML divs that scroll vertically

To achieve this very useful functionality:

CSS has a property called overflow , which has many values like:

auto : Indicates that there should be a scroll bar in the x or y-axis, depending on where the display is chopped.

hidden : The overflow should be chopped away, making it invisible.

scroll : This provides a scroll bar for viewing clipped content.

visible : This leaves the overflow to display outside the box of the div.

We can use a combination of overflow-x and overflow-y to place the scrollbar vertically, horizontally, or both. For the vertical scrollbar, overflow-x:hidden and overflow-y:auto will be set in the CSS file, and vice versa for the horizontal scrollbar.

Below are some code examples.

The code above implements the scrollbar as described in method 1 .

To implement method 2 , just change the CSS portion of this code by removing overflow-y and overflow-x , and replace them with overflow:auto .

The output from the two codes will be the same and will look like the image below.

You can see the scrollbar in the right corner of the div.

RELATED TAGS

CONTRIBUTOR

Learn in-demand tech skills in half the time

Skill Paths

Assessments

Learn to Code

Interview Preparation

Data Science & ML

GitHub Students Scholarship

Early Access Courses

Explore Catalog

For Individuals

Try for Free

Become an Author

Become an Affiliate

Earn Referral Credits

Frequently Asked Questions

Cookie Policy

Business Terms of Service

Data Processing Agreement

Creating HTML Scrollable Div: Process Consisting of Several Steps

Recent Posts

Python Remove Duplicates From List: Master the Techniques - December 8, 2023
Nonetype Object Is Not Subscriptable: How To Fix Your Code - December 7, 2023
Ora 00904 Invalid Identifier: Fix Your Oracle SQL Statements - December 7, 2023

Keep reading this article to learn more about the HTML scrollable box and how to create one in your next HTML document.

JUMP TO TOPIC

How To Make a Div Scrollable in HTML Documents Using CSS?

Create an html scrollable div in just two steps, – first method, – second method, – listing all necessary values, – creating the syntax, wrapping things up.

To create an HTML div scroll in your document you are supposed to use the CSS overflow property . This CSS property has numeral values you can write to change the function and use. The scroll in HTML documents can be done using the horizontal or vertical CSS properties, all according to your needs. Moreover, the process of creating a correct HTML scrollable div syntax consists of a couple of steps and they are all explained in the following section.

Creating various functions in your HTML documents usually requires the addition of multiple elements and properties. However, including specific CSS properties and JavaScript functions can help you create a professional web page that is visually appealing. The same can be said when trying to create an HTML scrollable div in your document because it consists of two steps.

The two required steps to create a functional scroll bar are shown in the following list:

Create the HTML syntax using all necessary HTML elements and properties
Create and link the CSS syntax including the overflow and other necessary properties

This is all it takes to create a complete and functional syntax consisting of the important CSS overflow property. We are going to provide you with thorough examples that are going to show you exactly how it is done. After that, you must learn more about the CSS overflow property that has plenty of values. In the following section of this article, we are going to show you how to apply the different methods of creating an HTML scrollable div.

Coding Examples Using Two Different Methods

When creating a scrollable div section in your HTML document, you can use two different methods. Both of these methods require the addition of the CSS overflow property. However, there is going to be a slight difference in the value and the name of the property. First, we are going to teach you how to create the scrollable div using the overflow property values we’ll discuss later.

As mentioned before, this method requires the use of the CSS overflow property and the scroll value. We are going to provide the complete syntax using the specific HTML elements and CSS styling properties. The two syntaxes are going to be written on the same HTML document.

We are going to include other CSS properties to further style the visual output, as shown in the following example:

All the necessary HTML elements and CSS properties are shown in this example. As you can see, the HTML overflow property has the scroll value that is going to create a scrollbar.

Now, let us take a look at the other syntax that has the same function of creating a scrollable div section .

This example is also going to contain the CSS overflow property. However, it is going to include the vertical and horizontal values represented by x and y. Inside these properties, you are supposed to use one of the CSS overflow property values mentioned before. Again, we are going to include other styling properties that are going to improve the default visual output.

The following example is going to contain the same HTML syntax but with different CSS properties:

The biggest difference between these two examples can be seen in the CSS overflow property . As explained before, you are supposed to write the x and y properties and include a specific value. Instead of using the scroll value, this example contains the hidden and auto values . This is all it takes to learn how to create an HTML scrollable div section using two different methods!

Looking at the Basics To Create Scrollable Div

The CSS overflow property is used to create a scrollable div in your HTML documents. However, besides this function, you can include several other values that are going to create different functions .

The main function of this property is to specify whether the browser is supposed to include scrollbars or clip-specific content . The CSS overflow property values are going to be discussed in the following section of this article.

As with other CSS properties, the overflow has a specific set of values you are supposed to include in the syntax to make everything work. The CSS properties can be included in the same HTML document or a separate file. First, you are supposed to write the overflow property and then include the specific value. The CSS overflow property values are shown in the following bullet list:

visible – this is the default property of the CSS overflow. It means that the overflow is not clipped and it is going to be rendered outside the box of the element.
scroll – this value is going to create a clipped overflow. However, a scrollbar is going to be added so users can navigate the rest of the document.
auto – the auto value is going to create a conditional state. If the overflow is clipped, the scrollbar is going to be added to the rest of the document.
hidden – another value that creates a clipped overflow. The rest of the content is going to remain visible to users.
initial – this value is going to return the function of the property to its default value. You can use this keyword on any HTML element in your document.
inherit – this value is going to result in the element inheriting the property from a specific parent element. Again, it is a keyword you can use on any HTML element.

These are all the specific values of the CSS overflow property. As you can see, the scroll value is shown here, amongst the others. In the following section of this article, we are going to teach you how to create a syntax using any of these values .

Our final step here is looking at the CSS overflow property code . As mentioned before, you can include the syntax in the same HTML documents but experts recommend writing it on a separate file. We are going to provide you with an example that only contains the CSS overflow property and its values.

When creating CSS properties, you are supposed to create classes, as you can see from the following example :

As you can see, we have provided you with a syntax that contains all six CSS overflow values discussed in the previous section of this article. All you are supposed to do is to include this property in the class you are trying to style and the browser is going to do all the job for you. Now, you are fully ready to create the complete HTML scrollable div syntax.

Creating an HTML scrollable div section on your web page requires the addition of the CSS overflow styling property. This article taught you many different things about the process and they are all summarized in the next bullet list:

You cannot create a scrollable div section using only HTML elements and attributes
The addition of the CSS overflow property is necessary
You can include several values for the CSS overflow property
The creation of the HTML scrollable div section consists of two steps
It is recommended to use other CSS styling properties
There are two methods you can use to create a scrollable div section on your web page

How TO - Smooth Scroll

Learn how to create a smooth scrolling effect with CSS.

Smooth Scrolling

Click on the link to see the "smooth" scrolling effect.

Note: Remove the scroll-behavior property to remove smooth scrolling.

Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):

Browser Support

The numbers in the table specify the first browser version that fully supports the scroll-behavior property.

Cross-browser Solution

For browsers that do not support the scroll-behavior property, you could use JavaScript or a JavaScript library, like jQuery , to create a solution that will work for all browsers:

Tip: Read more about the scroll-behavior property in our CSS Reference: CSS scroll-behavior Property .

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]