``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action.

Is there a way for the scrollbar to be fixed in its position, while any excess content is neatly cut off by the rounded corners as if it were inside the borders of the div?

div {
  margin: 20px;
  width: 100px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}

p {
  float: left;
  width: 100%;
  padding: 10px;
}
<div>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>
htmlcss

Answer №1

Make sure to enclose your text in this manner

.main {
  overflow: hidden;
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
}
.test {
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  float: left;
  width: 100%;
  padding: 10px;
}
<div class="main">
  <div class="test">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
  </div>
</div>

Answer №2

One of the most efficient ways to solve your scrolling issue is by wrapping your scroll div and applying a specific style to it.

div.wrapper {
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
  padding: 1.2rem 0.05rem  1.2rem 0
}

div.scroll{
 overflow-x: hidden;
 overflow-y: scroll;
  height: 200px;

}

p {
  width: 100%;
  padding: 0 10px 10px;
  margin: 0;
}

/* Customize scrollbar width */
div.scroll::-webkit-scrollbar {
  width: 15px;

}

/* Track styling */
div.scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 30px;
}
 
/* Handle customization */
div.scroll::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 30px;
  
}

/* Hover effect for scrollbar handle */
div.scroll::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
<div class='wrapper'>
  <div class=scroll>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  <p>Item 5</p>
  </div>
</div>

Answer №3

To conceal any excess content, utilize the overflow:hidden property.

.root {
  margin: 20px;
  width: 100px;
  border: 1px solid black;
  border-radius: 30px;
  display: inline-block;
  overflow: hidden;
}
.scrollIt {
  height: 250px;
  overflow-x: hidden;
  overflow-y: scroll;
}
p {
  width: 100%;
  padding: 10px 10px;
}
<div class="root">
 <div class="scrollIt">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
 </div>
</div>

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

Having trouble with jQuery field validation not functioning as expected?

I'm trying to implement user input validation when the submit button is clicked, but I can't seem to get it to work. Using jQuery $(document).ready(function() { function validateForm() { if ($('#u').value() == '') ...

jqueryhtmlvalidation

I'm currently working on a course assignment and I've encountered an issue where nothing happens when I try to execute node

Having trouble with the readline for input execution. Any helpful hints or tips? I've been using it in the same file for all exercises, checked stackoverflow too but realized I'm on Windows. This is my code const { rejects } = require('asse ...

javascripthtmlnode.jsbackend

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

javascripthtmlfirebasegoogle-cloud-firestore

Having trouble with GSAP Scrolltrigger PIN functionality in Next.js?

When I comment out the pin: true property in my code snippet below, everything works as expected except that the container wrapping the sections that should scroll horizontally does not stick to the top. However, if I uncomment the pin: true line, the enti ...

cssreactjsnext.jscss-animationsgsap

How can we prevent the text from shifting when the border width is adjusted

I've run into an irritating issue. My left menu text keeps shifting when I expand the border using jQuery. I've tried various solutions to prevent the text from moving, but nothing seems to work. Any suggestions? Could it be a CSS problem with t ...

jqueryhtmlcss

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

Google App Engine displaying a blank screen error

I've been playing around with this concept where there's a table of 'events' on a '/search' page. When the 'GO' button of an event is clicked, it should increase the 'RSVP' count for that event and redirect ...

pythonhtmlgoogle-app-enginegoogle-cloud-datastore

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

csscss-selectors

Is separating Jssor Slider CSS effective?

Having a bit of trouble with the Jssor slider here. I'm trying to separate the slider styles into an external CSS document and running into issues. For instance: <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 11 ...

jquerycssjssor

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

javascriptjqueryhtmlcss

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

javascripthtmlcss

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

javascripthtmldom

Enhance your website with Jquery-powered page transitions that can easily be linked for a

I have a client who has a specific vision for their website. To demonstrate the concept, I've created a demo which can be viewed here: She requested page transitions similar to those in the demo for the main content. I used jQuery to implement this ...

jqueryhtmlanimationtransition

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

htmlcssbootstrap-5

Using EJS Tags within an external CSS file

I have been working on refactoring a Node.js project, and I currently have my CSS code within my .ejs file. I need to incorporate some dynamic data into my CSS file. It works fine when the CSS is within the EJS file. However, when I move my CSS to an exte ...

cssnode.jsejs

Issues occurring with PhoneGap preventing the execution of AngularJS code

I've recently delved into learning AngularJS with PhoneGap and I have a basic HTML code along with some AngularJS snippets. While everything runs smoothly in the browser, only the HTML portion seems to work when I attempt to run it on my Android phone ...

javascripthtmlangularjsphonegap-buildphonegap

Exploring the internet using a specific font style and ensuring a

I am facing an issue with the fonts on my website. They work perfectly in all browsers when using http, but as soon as I switch to https, the fonts stop working in IE8 and lower versions. However, they do display correctly in ie9. When trying to access th ...

cssiis-7

Customizing the appearance of a submenu header on a WordPress website

I need assistance in creating a sub-menu style. Please refer to the image linked below for guidance: Here is my website link: ...

csswordpressmenu

Is it possible to iterate through HTML elements without relying on forEach()?

Currently working on my web-based system using Node.js and HTML. Are there any alternative ways to iterate through HTML elements without using forEach? I'm considering something like this (for example): <% for(var ctr=0; ctr<arrayname.length ...

javascripthtmlnode.jsexpresshtmlelements

Showcasing Portfolio Work in a User-Friendly Mobile Design

Currently revamping my portfolio website and looking for ways to optimize the display of my personal projects. I have a card-like interface in place that works well on desktop but only shows one project at a time on mobile devices. Seeking solutions to imp ...

javascripthtmlcsssliderportfolio