Creating a custom scrollbar within a div using CSS and JavaScript

In my final school project, I have implemented a custom scrollbar with divs that have a border radius of 15px. However, when I add the custom scrollbar with the same border radius, it overlaps the div and does not look as visually appealing as I would like.

https://i.sstatic.net/cJ5xW.png

Is there a way to position the scrollbar inside the div so that its edge is not visible?

Here is a snippet of the CSS code:

    #ruv_results, #stod2_results,#stod2bio_results, #stod3_results{
    text-align:center;
    }

.ruv_title_css, .stod2_title_css,.stod2bio_title_css, .stod3_title_css{
    font-size:20px;
    color:#ffffff;
    border:1px solid #000000;
    border-radius:15px;
    margin-top:25px;
    width:450px;
    height:550px;
    display:inline-block;
    vertical-align:top;
    box-shadow: 0 0 20px #000;
    background:#5e5e5e;
    box-shadow: inset 0 0 20px #000000;
    padding-right:4px;
    padding-left:4px;
    margin-bottom:10px;
    margin-right:6px;
    margin-left:6px;
}


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 15px;
    height:90%;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
javascripthtmlcssscrollbar

Answer №1

To add some padding to the element, you can enclose it in another div with the following CSS styling:

.outer {
  background-color: #eee;
  box-shadow: inset 0 0 10px #ddd;
  border-radius: 15px;
  padding: 1em;
}

.inner {
  max-height: 200px;
  overflow: scroll;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 15px;
  height:90%;
}

::-webkit-scrollbar-thumb {
  border-radius: 15px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

body {
  overflow: hidden;
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a iaculis enim. Fusce pellentesque mauris vitae urna sodales gravida. Pellentesque pharetra est sit amet sodales faucibus. Mauris ultrices scelerisque feugiat. Duis magna arcu, condimentum at nunc ac, aliquet congue mauris. Curabitur feugiat urna rutrum urna porttitor, facilisis lacinia nisl facilisis. Nulla porttitor, neque id varius tincidunt, nibh lectus ornare mauris, eget consectetur elit lectus quis magna. Sed fringilla semper est eu imperdiet. Phasellus accumsan orci vitae quam hendrerit venenatis. Sed rhoncus nulla non enim euismod, a pretium nisi feugiat.

    In blandit augue gravida, viverra quam vitae, malesuada sem. In mollis ante non felis accumsan ullamcorper. Cras egestas, mi ut varius elementum, libero libero ultricies nulla, vel suscipit nisi dolor vel massa. Sed non nunc nibh. Vivamus eu libero gravida, interdum justo eu, facilisis ipsum. Pellentesque accumsan justo nec odio vestibulum iaculis. Maecenas ac turpis nisi. Nullam pharetra eros at tellus convallis, sed ornare orci egestas.
  </div>
</div>

Answer №2

To address the issue without utilizing any code, one potential solution could involve adjusting the z-index values of the two elements. It may be worth considering positioning the element with a scrollbar under the containing element to conceal any protruding parts.

Additionally, remember to include the position property on the element that is assigned a z-index value.

Explore more about z-index in CSS here

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

How can I use JQuery to find the index of an array and display its corresponding variable?

I am working with 2 variable arrays: var x = [11, 25, 34, 45] var y = [apple, banana, orange, grape ] I need to find the indexes of array x where the value is 34. In this case, the indexes are 2. Then I want to display the corresponding elements from y[2 ...

javascriptjqueryarraysindexing

Steps to have index.html display when running the build command in a Svelte project:

Greetings everyone, I'm brand new to using Svelte and have a question that's been on my mind. I recently developed a small app in Svelte that works perfectly fine during development. However, when I run npm run build for production, the output ...

javascriptnpmsvelte

Reach the underlying DOM element <input>...</input> using styled-components

I am struggling to make changes to the styling of an <input /> wrapped in a React component using styled components. The style I want to override is visible in Dev Tools here: .ui.input input {...} I believe the wrapping component needs to pass th ...

cssreactjsstyled-components

Is your jQuery code failing to load properly?

https://jsfiddle.net/11632r3m/ My attempt to create a simple color change for a div element in my HTML file has been unsuccessful. The provided fiddle showcases the issue. HTML <div class="pagewrap"></div> <div class="sidebar"></div ...

jqueryhtmlcss

Adjust text alignment based on the mobile device screen size using Bootstrap 4

On smaller devices, the layout of my horizontal label and text field is not as I expected. It appears like the image below: https://i.sstatic.net/9I8Os.png I am trying to make the First Name label left-aligned on small devices. Here is the code I have be ...

cssbootstrap-4

Updating a component in Angular 4.3.1 from within an observable callback

My Project Journey I am currently immersing myself in learning Angular by working on a personal project: developing a game that involves routing, services, and more. One of the requirements is to hide the header on the landing page (route for '/&apos ...

javascriptangulartypescript

Spinning cards in Bootstrap 4

Currently working on my own card design using Bootstrap v4, specifically utilizing rows and columns. Encountering an issue when attempting to stack the two sides of the card on top of each other. I have tried using position: absolute; but they disappear co ...

htmlcssbootstrap-4

determining the arrangement of objects in an array when using the find method

I am providing the following code snippet: var users = [ { name: 'Mark', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe2eefde4cfe2eee6e3a1ece0e2">[email protected]</a ...

javascript

Steps for updating a nested state array and then returning the complete array in React

Currently utilizing React Hooks and this is my current state configuration: const [ chats, setChats ] = useState() The "chats" state contains the following array: [ { "messages": [ { "message": "hi", "seen": ...

javascriptarraysreactjsreact-hooksuse-state

Issue with displaying Bootstrap v3.3.7 modal on webpage

I can't get my modal to show up when users click on the "Edit" button to edit their posts. When clicking the button, nothing happens - there are no visible errors, and checking the console doesn't provide any insights either. My bootstrap version ...

javascripthtmlangularjsmodal-dialogbootstrap-modal

I am puzzled as to why the <div title=***> changes to oldtitle when I apply the jQuery .css method

Here is the code I am currently using: $("#selectResult").append("<div id='"+arr[this.id]+"' class='inline' title='Co. "+arr[this.id]+"'></div>"); $("#"+arr[this.id]).css({'background-image' : 'ur ...

jqueryhtmltitleqtip

Retrieving CSS properties of an element using JavaScript

How can I efficiently retrieve all CSS rules associated with a specific element using JavaScript? I am not seeking a particular solution, just looking to capture all CSS rules for the given element. For example, consider the following HTML code: <div ...

javascriptjqueryhtmlcss

Set an HTML line break after every comma in the array

Here is my array: var a = ['bla bla bla', 'bla bla', 'bla'] I want each value to be displayed on a new line after every comma (<br />), but I am unsure how to achieve this. I attempted the following approach: var a = [& ...

javascripthtmlreactjs

Tips for placing a div within a curved div?

I've got a nested div situation, <div style="background-color: red; height: 100px; width: 100px; border-radius: 10px;" id="div1"> <div style="background-color: orange;" id="div2"> testing </div> </div ...

javascripthtmlcss

Is it possible to track the onbeforeunload event using $watch in AngularJS?

As someone new to angularjs, I am currently facing a challenge with catching the onbeforeunload event. My objective is to provide a response to users when they attempt to leave the page. I hope to monitor the onbeforeunload event using $watch and trigger m ...

javascriptangularjsangularjs-directiveangularjs-scope

Is custom CSS selector disregarded by Internet Explorer?

Internet Explorer is giving me a headache. This is the CSS code I'm using: kl { font-size:10pt; font-weight: bold; color:#6e90a6; } And here is my HTML code: <div id="testid"><kl>test</kl> Why is Internet Explorer no ...

cssinternet-explorerselector

Random sequencing of the commands

Whenever I call the Details function, it returns empty details because the function executes before retrieving data from the json file. What is the best way to fix this issue? app.controller('loginCtrl',function($scope,login){ $scope.user=login ...

javascriptangularjs

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu

There was an unhandled type error stating that "undefiened" is not a function while processing a JSON

Hey there! I'm currently using JSON to send a list of songs to populate my table. The JSON response is working fine up until the controller URL. However, when I attempt to loop through it and display the details in my table, I encounter an error. $( ...

javascriptjson

Take action right away following a post in jQuery

I'm a beginner at using jQuery, and I have a question about displaying content immediately after making a post request. Currently, my code looks like this: $('#cur_select').on('change', function() { $.post( "getTable.php", { v ...

javascriptjquery