Html: How to create a DIV with only vertical scroll-bars for long paragraphs?

Setting up the scrollable div

Managing dimensions

Defining the width and height for your <div> controls the visible area for your content and the behavior of the scrollbar. Think about using CSS units like em, vw, and vh for responsiveness.

Making the most of max-height

Opt for max-height in place of height to give your <div> an adaptable size before the scrollbar appears, offering a solution for unpredictable content length.

Understanding overflow behavior

Utilize overflow: auto; to create scrollbars only when necessary. This improves usability by providing scrollbars only when required.

Maintaining style and scalability

Inline styles are great for a quick solution but can get tricky with larger projects. For better maintainability and scalability, consider implementing external CSS:

.scrollable-div {
  overflow-y: scroll;     // The magic wand for vertical scrolling!
  overflow-x: hidden;     // The handcuffs for horizontal scrolling!
  max-height: 200px;      // The measuring tape for content length!
}


<div class="scrollable-div">
  <!-- Your magnificent content goes here -->
</div>


Keeping content legibility

Ensure your <div> width is wide enough to maintain readability when scrollbars activate. Accommodate a variety of devices by testing at multiple screen sizes and resolutions.

Scrollable divs: Application and Accessibility

Tailoring to use-cases

• Read-only text: Maintain scrolling efficiency and readability for logs or transcripts.
• Forms with instructions: Keep your form elements visible by using scrollable divs for instruction texts.
• Responsive web design: Focus on user-friendliness with scrollbar sizes that are easy to handle on mobile devices.

Emphasizing accessibility

• Keyboard navigation: Ensure your content is navigable using keyboard controls (Tab, arrow keys).
• Screen readers: Use ARIA roles and properties to achieve accurate reading of the presence and function of the scrollbar.

Scrollable div advanced techniques

Media Queries: Tailoring user experience

The <div>'s dimensions can be modified according to the device or window size using media queries enhancing user experience:

@media (max-width: 600px) {
  .scrollable-div {
    max-height: 150px;
  }
}


Customizing Scrollbars

Browsers have their default scrollbar styles. Tailor them on webkit browsers using pseudo-elements like ::-webkit-scrollbar:

.scrollable-div::-webkit-scrollbar {
  width: 12px; // The diet plan for your scrollbar!
}


Do the Snap with Scroll Snapping

Scroll snapping effect locks the viewport to certain elements as the user scrolls, achieved using scroll-snap-type:

.scrollable-div {
  scroll-snap-type: y mandatory;
}

.scrollable-div p {
  scroll-snap-align: start;
}
