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!

javascripthtmlcss

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>

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

Issues with the event firing in the Polymer component for google-signin?

I recently set up a new starter-kit project using polymer-cli 1.7 and I'm attempting to incorporate Google authentication utilizing the google-signin element. Although the sign in button appears and works for signing in, the signedIn property isn&apo ...

javascriptpolymergoogle-authentication

What is the best way to send a populated custom class from JavaScript to a .NET MVC app using AJAX?

I am working with a .NET class in C# called BusinessModel: public class BusinessModel { public string BlobName { get; set; } public string NewName { get; set; } } In my MVC Ajax Controller, I have an action called DoBusiness: [HttpPost] public A ...

javascriptc#jsonajaxasp.net-mvc

Modify data in an array using Vuex

When working with my Vuex mutation, I am trying to replace an element in an array within the state. The code snippet below illustrates what I am attempting to do: UPDATE_MAILING(state, mailing) { let index = _.findIndex(state.mailings, {id: mailing.id ...

javascriptvue.jsvuejs2vuex

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

javascripthtmljqueryreplacewith

Using a for loop in JavaScript to dynamically display TextBoxFor(model=> model[i].prop) in an MVC application

I need some help getting this code to function correctly: $('#ddl').change(function () { $('#cont').html(''); var count = getCount($('#ddl').val()) for (var i = 0; i < count ; ...

c#javascriptjqueryasp.net-mvc-4razor

Is there a way to filter out only the objects from the JSON data and exclude the strings?

I am facing an issue while looping through a JSON object. The presence of strings in the JSON is causing the loop to fail. How can I iterate only through the objects in the JSON without affecting the loop? My main goal is to iterate through the objects co ...

javascriptjson

The require() function is not functioning properly, even after I tried switching the type from module to common. As a newcomer to this, there may be something essential that I

Despite changing the type from module to common, I am still unable to get require() to work. As a newcomer to this, there may be something I'm overlooking that I can't quite pinpoint. I attempted const express = require('express'); but ...

javascriptnode.jsexpress

Exploring data-toggle elements using jQuery

I am faced with the challenge of dynamically constructing a form using jQuery. The form includes a checkbox list of items that I am creating in the following manner: function initializeForm() { var html = ''; var items = GetItems(); for ( ...

javascriptjquery

Locate the nearest date (using JavaScript)

Searching for the nearest date from an XML file. <?xml version="1.0" encoding="UTF-8"?> <schedule> <layout fromdt="2014-01-01 00:00:00" todt="2014-01-01 05:30:00"/> <layout fromdt="2014-02-01 00:00:00" todt="2014-01-01 05 ...

javascriptjqueryhtmldatedatetime

What is the best way to iterate through a puppeteer selector's response in a loop?

So, by using page.evaluate I can accomplish the following: await page.evaluate(function() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; i++) console.log(links[i].href); }); However, I am interested in a ...

javascriptnode.jspuppeteer

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Experiencing issues with Firebase authentication on Nuxt app when refreshing the page for beginners

Despite my efforts of trying numerous examples and methods, I am still stuck in this situation - I have been struggling with it for the past 2 days now... The issue I am facing is that my app functions properly when I log in and click on links, but if I re ...

javascriptfirebasevue.jsnuxt.js

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Is it possible to host multiple React applications on the same port? I am experiencing issues with running both an Admin panel and a Front side React app in production mode on the same Node.js API server. ...

javascriptnode.jsreactjsmongodbreact-redux

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

htmlcsshtml-tablewidthfixed-header-tables

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

The interactivity of data-ng-click in HTML is not functioning as expected

I need help with implementing the data-ng-click functionality for a dynamically created button. Can someone assist me with this? var table = document.getElementById("dashboard"); for( var i = 0; i < $scope.namesOfMembers.length; i++ ){ var row = t ...

javascriptangularjs

In order to indicate the checkbox as checked, I must ensure that its value is set to

I have a requirement where I need to dynamically set the checkbox based on the value coming from the backend. If the value is true, the checkbox should be checked and if false, it should be unchecked. However, despite setting the value in the state rules, ...

javascriptreactjs

NumericError on /post_create/ unrecognizable numeric value: 'manish'

I have a unique vision: I want to create posts with different authors in separate models def post_creation(request): author, initiated = Author.objects.get_or_create(name=request.user.username) form = CreationForm(request.POST or None , request.FILES or ...

javascriptjavapythondjango

What is the best way to immediately update the state in a React functional component?

Having recently started learning React, I find myself struggling to understand the lifecycle of a functional component. Let's consider a scenario where I have multiple checkboxes labeled as: checkbox, a, b, c, and d, each corresponding to values a, b, ...

javascriptreactjsfunctional-programmingcomponents

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

javascriptangulargoogle-sheets-api