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

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

htmlcss

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

htmlcsshtml-table

What is the best way to use jQuery to adjust the size of a slider image based on a percentage of the browser window

I've been searching all over for a solution to this issue, but so far I haven't had any luck. Basically, I have an image that is 1800 pixels wide by 500 pixels high. I need this image to adapt to all screen resolutions. Instead of having a fixed ...

jqueryhtmlcss

Leveraging $this in conjunction with a jQuery plugin

I'm experimenting with a code snippet to reverse the even text in an unordered list: $(document).ready(function () { $.fn.reverseText = function () { var x = this.text(); var y = ""; for (var i = x.length - 1; i >= 0; ...

javascriptjqueryhtml

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

In order to make an API request, I need to retrieve the id. However, whenever I try to include <a v-on:click="showRecipe({{inf.Id}})">Recipe</a> in my code, the entire page crashes. Removing this line resolves the issue. How can I pass the id ...

javascripthtmlvue.jsvuejs2vue-component

Warning displayed on form input still allows submission

How can I prevent users from inserting certain words in a form on my website? Even though my code detects these words and displays a popup message, the form still submits the data once the user acknowledges the message. The strange behavior has me puzzled. ...

javascriptphphtmlajaxvalidation

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

Utilizing jQuery to accentuate a specific div element when it is positioned directly in the center of the browser window

I have multiple divs with id="scroll_1", "scroll_2", "scroll_3", and so on. I am trying to implement a feature where when any of these divs is in the center of the window, I want to change the background color using jQuery highlight. Currently, I am able t ...

jqueryhtmlcss

Tips for presenting PHP code in a Bootstrap 3 col-sm-4 layout for each set of 3 database entries in a single row

My PHP program retrieves 3 customer records from the database. I want to display the results in a Bootstrap grid view with 3 columns of col-sm-4 in one row. Currently, it displays all the results in a single vertical line. Another requirement is to show ...

phphtml

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

I need help keeping a specific element at the initial 100% height of the viewport, without it resizing when the user changes their window size. Should I use JavaScript to determine the initial viewport height and then pass those dimensions to the CSS? Can ...

htmlcssviewport

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

javascripthtml

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

Update the division by clicking the button with a randomly generated JavaScript string element

Trying to solve a unique problem here as none of the proposed solutions on similar questions have worked for me. Apologies if I'm missing something, I'm new at this. The issue is with loading an empty div on my page using javascript and strings ...

javascriptjqueryhtmlajax

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

javascriptjqueryhtml

How can I trigger a PHP function from within an HTML onClick() event?

While I have come across a response on stackoverflow regarding form submission, my query pertains to a different implementation. I am in need of calling a function that registers a variable in $_SESSION[], and then redirects to another page (html/php). I ...

phpjavascripthtml

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Presenting a basic HTML code snippet - https://jsfiddle.net/mark69_fnd/6g0L0jwc/ <body style="background-color: white; font: normal 14px Verdana"> Hello <p></p> <a style=" font: bold 11px; text-decoration: none; background-color ...

htmlemailoutlook

Take charge of Bootstrap 4 dropdown transformation class while creating a Megamenu

I am currently working on creating a Megamenu using Bootstrap 4's dropdown Component. The issue I'm facing is related to Javascript adding CSS styles with transform, such as transform: translate3d(9px, 5px, 0px); This is causing disruption in m ...

jqueryhtmlcssbootstrap-4megamenu