Tips for concealing the scrollbar on Firefox while still allowing scrolling within a div container

Is there a way to hide the scrollbar in Mozilla Firefox without preventing scrolling within a specified div?

I have tried using the following CSS, however, I do not want to include "overflow-x: hidden" in the div that already has a scrollbar. Additionally, I cannot use jQuery plugins for Scrollbars due to conflicts with a 3-level nested menu.

margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;

Another CSS solution I attempted does not seem to work in Firefox:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

If you have any suggestions related to CSS/jQuery to address this issue, please share them with me.

jquerycssarrayshtml

Answer №1

To achieve a scrollable div without displaying the scrollbar, wrap it in another div with overflow:hidden.

   #wrap {
        width: 150px;
        overflow: hidden;
        outline: 1px solid yellow;
    }
    
    #scroll {
        width: 170px;
        height: 100px;
        overflow: auto;
        background: blue;
        color: white;
    }
<div id="wrap">
        <div id="scroll">
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
        </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

Is it possible that setting overflow:hidden can transform it into a block-level element?

Hey there! I’m attempting to create a horizontal navigation bar. I've set the ul with overflow:hidden and each li with float:left. Below the horizontal nav bar, I have added some paragraphs. However, when I remove "overflow:hidden", the paragraph ...

htmlcss

Steps for inserting a JSON Array into a database

I have a dropdown menu that displays different options based on the selection from another dropdown. The data for each dropdown is fetched from the database and I need to insert the selected values into a new table in the database. All the necessary code ...

javascriptphpjquerymysqljson

How can I implement 'blocked tails' using the :after pseudo-element?

Apologies, I'm uncertain of the right term for these elements. I have a module that reveals another box with information when hovered over. I want them to be visually connected by an angled rectangle or tail to indicate their association. Something a ...

jqueryhtmlcss

Trouble achieving perfect vertical alignment for text

I'm currently facing a challenge in vertically centering text within a div element. I've experimented with various CSS and bootstrap solutions, but unfortunately, none have been successful. The closest result I've achieved so far is by using ...

htmlbootstrap-4

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Using Jquery/Javascript to locate the cursor or focused field when clicked

Is it possible to track the position of a cursor using an event listener? For example, if a user clicks a button, can you determine the exact location of the cursor at that moment? If so, how would you do this? UPDATE I hope I can clarify my question bet ...

javascriptjquerycursor-position

Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...

javascriptjquerycss

"Utilizing jQuery to asynchronously make an AJAX request with a setTimeout

Question about SetTimeout: Why does setTimeout(fn, 0) sometimes help? After reviewing the jQuery 1.8 source code, WHAT is the reason behind using setTimeout with a delay of 0 ms ? (instead of simply executing the callback immediately ?) Link to the ...

jqueryajax

Utilizing the LinkedIn API: Posting a network update using a variable value

Currently, I have a string variable and I am looking to post the value stored in this variable as a network update on LinkedIn. Could someone please provide guidance on how I can modify the code below to make this functionality possible? updateURL = "/pe ...

javascriptajaxjquerylinkedin-api

Retrieving JSON data with Typescript

https://i.sstatic.net/i5vFM.jpg I recently received some data from a request, expecting to return a JSON object that I can utilize in HTML. However, upon running console.log(this.data); I noticed that there are 20 elements in the articles array, but it ...

htmlcssjsonangulartypescript

Filtering a Datagrid view using an int[] Array with values retrieved from an SQL database

Currently I am delving into the realm of C# and working on a project involving an Inventory system. However, I have encountered a challenge in figuring out how to filter my datagridview using values from a public int[] array. This is the snippet of code c ...

c#arrayswpfdatagrid

Blank array declaration

Is there a way to create a pointer in C that can be either an array or a null pointer? For example: int * arr = (condition) ? int[var] : NULL I haven't found a method for declaring an unnamed, uninitialized, non-constant length array. I could creat ...

arraysc

Leveraging multer for handling a FormData object in a node.js server

Having trouble with an HTML form that includes two buttons among other text input areas. The front-end javascript code is set up to handle the submit action by creating a FormData object to store the file and sending it via a jQuery AJAX request to a node. ...

javascriptjqueryajaxnode.jsexpress

Looping through ajax calls depending on the status of a particular key

Utilizing a combination of jQuery, Ajax, and PHP, I have successfully implemented a system to query and display data from a database. The process involves submitting data to an Ajax page, as demonstrated below. Submitting an Ajax Request $('#mainInp ...

phpjqueryajax

Restoring byte arrays to their initial form on the hard drive in the C programming language

I've recently come across a challenge that some might find pointless, but it's been on my mind - how do I write a byte array back to its original file instead of executing it in memory? There is an abundance of information on executing in memory, ...

carrayslinux

Using PHP to transform objects into arrays is a common programming task

$query = "SELECT name FROM students"; $result_set = $connection->query($query); From the code snippet above, it can be inferred that the $result_set is an object holding values obtained from the database. If there are two names in the database stored ...

phparraysobject

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql

Breaking down a multidimensional array into individual arrays using Javascript

Having a serious problem here, I have an array structured like this: [[0,50],[0,68],[1,26],[2,9],[2,32]] I am looking to split this array into two separate arrays like so: array1 = [[0,50][1,0][2,9]] array2 = [[0,68][1,26][2,32]] Yes, you are correct g ...

javascriptarrayschartsfirebaseflot

Issues with jQuery fundamentals

For a while now, I've been grappling with jQuery. It's undeniably powerful and offers a plethora of fantastic capabilities. However, my struggle lies in the fact that I tend to incorporate multiple jQuery features simultaneously. For example, on ...

javascriptjqueryjquery-events