Tips on how to stop a webpage from scrolling and instead allow only the inner content to scroll

Check out my plunker for reference.

The goal I am aiming for is as follows:

  1. The webpage should stay fixed and not scroll in any direction
  2. If the content overflows its container, a scroll bar should appear strictly within that container

I have a main content area where horizontal scrolling works correctly when the content exceeds the width within the #content section.

However, vertical scrolling across the entire page occurs if the content is too long. My objective is to limit this vertical scroll bar to only the #content section.

Your assistance is greatly appreciated!

htmlcss

Answer №1

Here is an example that actually works.

Step 1: Create the body element:

> overflow: hidden

Step 2: Define the scrollable area 

> overflow: scroll

Give it a try:

Live Demo

Answer №2

After considering the options, it was determined that utilizing absolute positioning would be the most effective solution to prevent vertical scrolling on the page.

  header {
    height: 50px;
    width: 100%;
  }

  #main {
    position: absolute;
    top: 50px;
    width: 100%;
    bottom: 0;

    #content {        
      overflow: auto;
    }
  }

The only drawback identified with this method is the need to specify a fixed height for the header and a set top position for the main section to align correctly. While this may limit the flexibility of the header's size at runtime, the benefit of both scroll bars being fully visible simultaneously outweighs this limitation.

To see the end result, you can view the plunker.

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

Dynamic Sizing of Inline Input Fields in Bootstrap 3 Using Narrow Columns

My goal is to create an inline form within a small container (.col-sm-4) without it wrapping into multiple lines. I want the inputs to adjust to the column size while also having the button in the desired position. To achieve this, I have managed to remove ...

htmlcsstwitter-bootstrap

Choose either nth-child or nth-of-type within a nested element

Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...

htmlcsscss-selectors

Having trouble with jQuery div height expansion not functioning properly?

Having a bit of trouble with my jQuery. Trying to make a div element expand in height but can't seem to get it right. Here's the script I'm using: <script> $('.button').click(function(){ $('#footer_container').anim ...

javascriptjqueryhtmljquery-animate

Sorting functionality malfunctioning after dynamically adding new content using AJAX

Greetings to all, I have a question about my views. 1- Index 2- Edit In the index view, I have a button and AJAX functionality. When I click the button, it passes an ID to the controller which returns a view that I then append to a div. The Edit view con ...

javascriptjqueryhtmlajaxjquery-ui

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Dynamic loading of jQuery elements, such as Ibuttons, seems to be causing issues when implemented with an ajax dynamic content loader. The entirety of my website is rendered through Ajax just like this: <html> <header> {jQuery} </header> ...

javascripthtmljqueryjquery-plugins

Guide on automatically populating login data in an html5 form using a python script

I'm currently attempting to create a script that can automatically populate the values of an HTML5 form (specifically Name and Password fields). However, I am struggling with how to actually input these values. After searching various sites, I have y ...

pythonhtmlpython-3.xformsauthentication

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

What is the reason behind not being able to utilize addEventListener on a variable that has been selected through DOM's getElementsByClassName method?

btn = document.getElementsByClassName('btn'); value = document.getElementById('value'); let counter = 0; btn[2].addEventListener('click', function() { if (btn[2].classList.contains('decrease')) counter -= 1; if ...

javascripthtmlcssarraysdom

What is preventing me from being able to reposition certain tables on my site?

I have successfully implemented certain aspects of my responsive website, but I am encountering some difficulties in moving specific tables. I can adjust the table in various directions, except for moving it downwards. Even when adding the word !important ...

htmlcss

Calculate the total sum of values in a MySQL column and then group the results

I'm currently working on a quiz website and looking to create a leaderboard. The user scores are stored in a database table named 'user_record' with the following structure: 'user_id' - varchar(254) -holds the user id for a score ...

phphtmlmysqlsql

Updating a div's class upon clicking in React

This is my code: render() { return ( <div className='btndiv'> <button className='btn'>Hide</button> </div> ); } I'm trying to change the class of the div from .btndiv to .btndiv ...

cssreactjsevent-handlingreact-class-based-component

As soon as I inserted the image, the text vanished into thin air

The phrase "welcome" is not displaying after I included the av tag <!DOCTYPE html> <html> <style> @font-face { font-family: OpenSans; src: url(OpenSans-Bold.ttf); } * { ...

javascripthtmlhtml5-canvas

Repeated information in HTML tables

I am currently working with two HTML tables and two sets of JSON data. Initially, I load one table with the tableData which has a default quantity of 0. In my HTML form, there are three buttons - save, load draft, and edit. Upon clicking on load draft, I p ...

javascriptjqueryhtml

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

javascripthtmljquery

Discovering data in individual tr elements within a table with jQuery by utilizing .text()

I'm currently working on a project where I need to separate the three table rows within a dynamically generated table. My goal is to have jQuery treat each row individually in order to extract specific values like price and SKU. You can see an example ...

jquerycsshtml-table

Looking to turn off animation for a WordPress theme element?

Is there a code that I can insert into the style.css file to deactivate the theme animations on my WordPress page? As users scroll down, each element either drops in or slides in. I recently purchased the WP Alchemy theme from , but the animation speed is ...

htmlcsswordpress

Automatically switch to dark mode at specified times: A simple guide

Here is the current method for toggling themes: let themeToggler = document.getElementById('theme-toggler'); themeToggler.onclick = () => { themeToggler.classList.toggle('fa-sun'); if (themeToggler.classList.contains('f ...

javascripthtmljquerydarkmode

What is the best way to display two items from a list while hiding the rest?

I received a list generated from the backend that looks like this: <ul> {% for item in items %} <li>{{item }}</li> {% endfor %} </ul> My goal is to display only the first two items and collapse the rest, possibly with a 's ...

jqueryhtmlcsstwitter-bootstrap-3

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss