The scroll function remains unchanged when using overflow-y scroll and border radius

I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference:

https://jsfiddle.net/cjbruin/kkve1bas/

Here is the code snippet:

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
        turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
        vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
        Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce 
        aliquam quam sit amet malesuada lacinia.

        Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
        Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
        sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
        a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
        imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
        congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
        vitae finibus metus. Aliquam portt...</div>

CSS

div {
        height: 300px;
        width: 400px;
        border: 2px solid black;
        overflow-y: scroll;
        border-radius: 7%;
    }

Is there a way to solve this using CSS3 only? Or would I have to resort to JS/jQuery for a solution?

javascriptjqueryhtmlcss

Answer №1

Give this a try:

.container {
  padding: 15px;
  border: 2px solid black;
  height: 300px;
width: 400px;
  border-radius: 7%;
}
.container div {
height: 300px;
width: 400px;
    overflow-y: scroll;
    padding-right: 10px;
}
  
 
<div class="container"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce 
aliquam quam sit amet malesuada lacinia.

Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
eleifend eros. Quisque ut ultrices dui. Mauris quis
    </div></div>

Answer №2

You can customize the look of your scroll bar using the CSS code (::webkit-scrollbar-xxx) provided below, or by adding the "sidebar" class to your div element.

.sidebar::-webkit-scrollbar{
    width:5px;
    background-color:#303949;
}

.sidebar::-webkit-scrollbar-thumb{
    background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:hover{
    background-color:#cccccc;
}

.sidebar::-webkit-scrollbar-thumb:active{
    background-color:#cccccc;
} 

.sidebar::-webkit-scrollbar-track{
    border:1px #303949 solid;
    -webkit-box-shadow:0 0 5px 303949 inset;
}

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

comparing values in an array with jquery

I am attempting to retrieve the phone number and mobile number from an array using jquery. jQuery: var data = $('#PhoneLabel').text(); var array = data.split(', '); $.grep(array, function (item, index) { if (item.charAt(0) === &ap ...

javascriptjqueryhtml

Is it acceptable to utilize display:none in order to generate multiple CSS navigation bars for a responsive website?

I designed a CSS navbar that looks great on larger screens, but unfortunately it doesn't reflow well on mobile devices. One solution I thought of was to create a separate, mobile-friendly navbar and position it on top of the desktop version while hidi ...

htmlcssresponsive-design

The Issue of Horizontal Scrolling - None of the elements are out of

I am facing an issue with an unwanted horizontal scroll on my website and I can't seem to identify the cause. The header of my site is quite simple, utilizing display: flex, justify-content: center, marin-top: 5vh, along with some padding on the logo ...

javascripthtmlcss

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Fetching data dynamically from the server using AJAX for a interactive chart with Flot

After looking at the Flot reference, they mentioned, The plot function can also be used as a jQuery chainable property. Is it possible to configure the Flot chart in this way? var pid = ''; var kid = ''; var chartasset; $(documen ...

javascriptjqueryajaxcodeigniterflot

What steps should I take to address the issue of sanitizing a potentially harmful URL value that contains a

I've encountered a URL sanitization error in Angular and despite researching various solutions, I have been unable to implement any of them successfully in my specific case. Hence, I am reaching out for assistance. Below is the function causing the i ...

javascriptangulartypescriptimageangular-dom-sanitizer

A guide on assigning a state variable to a dynamically generated component within a React application

I need to display user data from an array and have a button for each watchlist that deletes it. Although the backend is set up with a function deleteWatchlist, I am facing an issue in setting the state of the watchlistName for each watchlist after mapping ...

javascriptreactjsnext.jsstate

Store live text field group in their respective index

I am working on a project that involves creating dynamic description textareas based on the value selected from a dropdown list. The dropdown list contains numbers 1 through 5, and for each number chosen, I need to generate corresponding textareas with ser ...

javascriptasp.net-mvc-4

Is it possible to update a ko.observable in Durandal from a different view?

Essentially, my goal is to achieve the following: In the main.html file: <div style="cursor:pointer" data-bind="compose: {model: $data, view: "child.html"}" /> <div style="background-color:#CCC; cursor:pointer; width:45px;" data-bind="visible: s ...

jqueryknockout.jsdurandal

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

What's the best way to ensure consistent spacing between a label and input field, regardless of the length of the text?

Imagine a scenario where there are 10 input fields, each preceded by a span tag on the left side indicating what should be entered. While working on this setup, I encountered an issue - how can I create a consistent space between the span tag and the input ...

formscsshtml

The process of matching the full names of the source and destination Strings in Node.js

Need assistance comparing two strings with a third string in a JSON Array for full names var source = intentObj.slots.toPlazaName.value.toString(); // Jaipur var destination = intentObj.slots.fromPlazaName.value.toString(); // Kishangarh Compare with t ...

javascriptjsonnode.jsalexa-voice-service

Browser local storage protection

Utilizing local storage to preserve specific data for my website has been beneficial. Each necessary object is stored so that users can access them on their browser (in chrome: Resource -> Local Storage). My objective now is to make these objects unrea ...

javascriptjquerybackbone.jslocal-storage

Styled-components is not recognizing the prop `isActive` on a DOM element in React

In my code, I have an svg component that accepts props like so: import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ) ...

javascriptcssreactjsecmascript-6styled-components

What is the best way to retrieve a variable from a .php file that is included in a different .php file?

My question is how can I retrieve a value entered in a text field (with the field name = usn) in my_file.php file, from another file called demo.php without re-entering it every time? I have multiple files and I want to access this value without using tex ...

phphtmlmysql

What is the best way to conceal specific series in a HighCharts legend?

In the chart, I currently have 4 series. At the moment, only 2 of them are visible while the other 2 are hidden when the chart first loads. As the user zooms in on the chart, the visibility of the series changes dynamically. I need help figuring out how ...

javascripthighcharts

extraction of information from an object within an array

I am working with an array of objects containing certain keys and values. My goal is to organize these objects by key and then display all the values associated with each key together. [ { '18': 'x' }, { '17': 'y' ...

javascriptnode.js

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process. According to the documentation provided by antd, if I opt for the default import of CSS by ...

cssreactjssassantd

Every time I attempt to destructure the state object in react typescript, I encounter the error message stating 'Object is possibly undefined'

Whenever I attempt to destructure my state object in react typescript, I encounter an error stating Object is possibly 'undefined'. When I try using optional chaining, a different error pops up saying const newUser: NewUser | undefined Argument o ...

javascriptarraystypescriptreact-typescript

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to ...

jqueryhtmlcssanimation