Skip to content
Fix Code Error

Making a div vertically scrollable using CSS

March 13, 2021 by Code Error
Posted By: Anonymous

This

<div id="" style="overflow:scroll; height:400px;">

gives a div that the user can scroll in both in horizontally and vertically. How do I change it so that the div is only scrollable vertically?

Solution

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

  • auto – This value will look at the width and height of the box. If they are defined, it won’t let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

  • scroll – This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn’t need to be scrolled, the bar will appear as “disabled” or non-interactive.

If you always want the vertical scrollbar to appear:

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can’t actually scroll the context, it will appear as a”disabled” scrollbar.

If you only want a scrollbar to appear if you can scroll the box:

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won’t be created (unless it’s on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

Answered By: Anonymous

Related Articles

  • Use of Jquery on scroll event
  • CSS customized scroll bar in div
  • Active tab issue on page load HTML
  • Is it possible to apply CSS to half of a character?
  • error LNK2005: ✘✘✘ already defined in…
  • Adobe XD to responsive html
  • Polymer paper-dialog: how can I know when an…
  • Form field border-radius is not working only on the…
  • insert tables in dataframe with years from 2000 to…
  • Reset/remove CSS styles for element only
  • How do i update a javascript variable as its value changes?
  • How to add 'load more' functionality to items on a…
  • HTML table with 100% width, with vertical scroll…
  • Centering in CSS Grid
  • Navbar not filling width of page when reduced to mobile view
  • Pandas pivot_table: filter on aggregate function
  • How to show title in hover - css / jquery
  • Animating Elements in One by One
  • Having trouble with my nav bar/header, It used to…
  • In CSS Flexbox, why are there no "justify-items" and…
  • paper-dialog stretching off screen
  • After a little scroll, the sticky navbar just is not…
  • How do I keep only the first map and when the game…
  • SQL find sum of entries by date including previous date
  • Vertical scroll inside paper-header-panel behaving…
  • Fix top buttons on scroll of list below
  • Scrollable Menu with Bootstrap - Menu expanding its…
  • How to use html template with vue.js
  • CSS Input with width: 100% goes outside parent's bound
  • collision detection from picturebox in a list c#
  • Increasing size of semi circle using css
  • Using Auto Layout in UITableView for dynamic cell…
  • Polymer 1.0 Trying to make a splitter which works…
  • The Aurelia way of adding a horizontal top scrollbar…
  • Text size and different android screen sizes
  • Chrome / Safari not filling 100% height of flex parent
  • Layout doesn't expand more than initial size it was…
  • Best HTML5 markup for sidebar
  • How to center an element horizontally and vertically
  • How to change the scrollbar color using css
  • Using setInterval for creating animation
  • Missing visible-** and hidden-** in Bootstrap v4
  • VueJS masonry layout
  • Aurelia pass configuration to plugin or feature
  • JavaScript Code not running on a Live Sever nor Local Host
  • Aurelia/Karma/Istanbul Cannot read property 'skip'…
  • CSS3 scrollbar styling on a div
  • How to vertically center a container in Bootstrap?
  • Jquery fadeToggle Trouble
  • What does the CSS rule "clear: both" do?
  • CSS Variable trough Polymer (dynamically loaded) elements
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • how to use canvas in JavaScript flappy bird code
  • Not submit any value if checkbox is empty
  • Why doesn't the height of a container element…
  • Javascript and css animation
  • I need to sum values with specific condition
  • Preventing scroll bars from being hidden for MacOS…
  • Prevent body scrolling but allow overlay scrolling
  • Use mobile scrollbar in Polymer
  • Add calculated column to df2 for every row entry in…
  • Make Iframe to fit 100% of container's remaining height
  • JavaScript gives NaN error on the page but variable…
  • How to create a game over screen for a basic HTML/JS game?
  • Polymer Nested Core-Scaffold and Multiple Vertical…
  • Obtain most recent value for based on index in a…
  • How to change the color of vaadin-select-text-field…
  • bootstrap 4 responsive utilities visible / hidden xs…
  • How to prevent scrolling the whole page?
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • center 3 items on 2 lines
  • Smart way to truncate long strings
  • Javascript validate all checkboxes are selected
  • What are the nuances of scope prototypal /…
  • What methods of ‘clearfix’ can I use?
  • Cannot make table responsive
  • Do not close the mode in the mouse up event
  • Vertically align an image inside a div with…
  • CSS overflow-x: visible; and overflow-y: hidden;…
  • How to vertically align an image inside a div
  • Onclick event not happening when slick slider is…
  • Polymer, how to adjust padding to internal div on…
  • CSS DIV width based on text length with position…
  • Azure Sql : Unable to Replace HTML String
  • Sizing polymer-dialog and polymer-dialog-scrollable:…
  • Why doesnt my table sort my div variable in numerical order?
  • My DIV elements go diagonal instead of horizontal
  • Hide scroll bar, but while still being able to scroll
  • jQuery trouble combining 2 functions
  • jQuery `.is(":visible")` not working in Chrome
  • How do I do a drag and drop using jQuery to move…
  • How do I switch two players in tic-tac-toe game in Python?
  • Show/hide 'div' using JavaScript
  • How to use code from Polymer Project Designer in…
  • Show div on scrollDown after 800px
  • How can I get a vertical scrollbar in my ListBox?
  • Twitter Bootstrap Datepicker within modal window
  • Full-screen iframe with a height of 100%
  • What is offsetHeight, clientHeight, scrollHeight?
  • html5/css/javascript : How to superpose two canvas in a div

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Select first row in each GROUP BY group?

Next Post:

Maximum and Minimum values for ints

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error