Unable to conceal the scrollbar while keeping the div scrollable

Question

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality!

My current approach involves setting the parent as relative and the child as absolute with overflow:hidden on the parent and overflow-y:scroll on the child, however, this hasn't yielded the desired results.

Here is my existing code:

parent
{
width: 100%;
padding-left: 30px;
height: 100%;   
box-sizing: border-box;
overflow: hidden;
}
child
{   
overflow-y: scroll;
}

Despite trying numerous solutions, I am perplexed as to why it's not functioning correctly. Any advice would be greatly appreciated!

javascript html css

Answer 1

Answer №1

Give this a shot

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

<div id="container1"><div id="container2">
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    farewell.
</div><div>

Answer 2

Give this a shot

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

<div id="container1"><div id="container2">
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    greeting<br/>I<br/>have<br/>arrived<br/>
    farewell.
</div><div>

Unable to conceal the scrollbar while keeping the div scrollable

Answer №1

Similar questions

Dealing with errors when chaining promises in a react-redux application

Challenges arise when employing angular scope functions in the context of the DOM (html)

In terms of function efficiency, what yields better results: using conditional execution or employing conditional exit?

Having trouble getting a styled button to align properly with the text next to it

Combining two CSS classes to create an "alias"

What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?

Incorporating live text into a tag while arranging items by price in both ascending and descending order

Struggling to map JSON data (received from WCFRest) onto an HTML table

Why is it necessary to decode JSON stringified objects in Vue props?

ClickAwayListener doesn't function correctly when used in conjunction with Collapse or Fade animations

The WebDriverIO browser.Click function encountered difficulty locating an element while using Chrome, but it is functioning properly on Firefox

Pass PHP array to a JavaScript file using AJAX

When Electron's WebView.loadURL is called, it initiates a reloaded page

hybrid application combining AngularJS with Angular 17 and above versions

Traveling within a layered object

Issue encountered while retrieving JSON data from Github

Basic HTML code that displays either one or two columns based on the width of the screen

What is the recommended approach for running a Node.js application in a production environment on a Windows operating system?

How come the words are clear, but the background remains unseen?

I am experiencing issues with staying logged in while using Passport and sessions. The function "isAuthenticated()" from Passport continuously returns false, causing me to not remain logged in