HTML5 enables the creation of an imperceptible scrollbar

Question

HTML5 enables the creation of an imperceptible scrollbar

I am looking to make my scrollbar invisible

without it being visible

however, I still want it to function when hovering over the box

Also, I need it to work smoothly on both tablets and computers, which is why I have opted for using html5

I would greatly appreciate any assistance

.scrollable {
  height: 100px;
  overflow-y: scroll;
}

<div class="scrollable">
  <table>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
    <tr>
      <td>row 3</td>
    </tr>
    <tr>
      <td>row 4</td>
    </tr>
    <tr>
      <td>row 5</td>
    </tr>
    <tr>
      <td>row 6</td>
    </tr>
    <tr>
      <td>row 7</td>
    </tr>
    <tr>
      <td>row 8</td>
    </tr>
  </table>
</div>

javascript jquery css html

Answer 1

Answer №1

If you want to make the scrollbar invisible, simply add the following line to your CSS file:

// -webkit- (Chrome, Safari, newer versions of Opera):

.element::-webkit-scrollbar { width: 0 !important }

// -moz- (Firefox):

.element { overflow: -moz-scrollbars-none; }

// -ms- (Internet Explorer +10):

.element { -ms-overflow-style: none; }

Answer 2

If you want to make the scrollbar invisible, simply add the following line to your CSS file:

// -webkit- (Chrome, Safari, newer versions of Opera):

.element::-webkit-scrollbar { width: 0 !important }

// -moz- (Firefox):

.element { overflow: -moz-scrollbars-none; }

// -ms- (Internet Explorer +10):

.element { -ms-overflow-style: none; }

Answer 3

Answer №2

How about this alternative solution:

.scrollable {
  height: 100px;
  overflow-y: hidden;
}

.scrollable:hover {
  overflow-y: scroll;
}

<div class="scrollable">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
  </ul>
</div>

Answer 4

How about this alternative solution:

.scrollable {
  height: 100px;
  overflow-y: hidden;
}

.scrollable:hover {
  overflow-y: scroll;
}

<div class="scrollable">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
  </ul>
</div>

Answer 5

Answer №3

This code snippet is designed to work with all up-to-date browsers (as of early 2023):

.no-scrollbars {
  scrollbar-width: none; /* Works for FF 64+ */
}
.no-scrollbars::-webkit-scrollbar {
  /* Applies to Chromium/Blink and Webkit browsers */
  width: 0 !important;
  height: 0 !important;
}

Avoid using outdated vendor prefixes like -moz- or -ms- in your CSS code. (Check out the detailed list of current vendor prefixes in CSS and JS at the end of my blog post linked here.)

Feel free to test this code yourself on CodePen.

Remember to prioritize accessibility considerations when implementing such designs.

Answer 6

This code snippet is designed to work with all up-to-date browsers (as of early 2023):

.no-scrollbars {
  scrollbar-width: none; /* Works for FF 64+ */
}
.no-scrollbars::-webkit-scrollbar {
  /* Applies to Chromium/Blink and Webkit browsers */
  width: 0 !important;
  height: 0 !important;
}

Avoid using outdated vendor prefixes like -moz- or -ms- in your CSS code. (Check out the detailed list of current vendor prefixes in CSS and JS at the end of my blog post linked here.)

Feel free to test this code yourself on CodePen.

Remember to prioritize accessibility considerations when implementing such designs.

HTML5 enables the creation of an imperceptible scrollbar

Answer №1

Answer №2

Answer №3

Similar questions

Transmitting multiple lines of text using the POST method in JQuery

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Utilize jQuery to manipulate a subset of an array, resulting in the creation of a new array through the use of

Managing input/output requests on Amazon EC2 instances

Guide to assigning an integer value to a string in Angular

Transfer the updated variable from a static JavaScript file to Next.js

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

What do you want to know about Angular JS $http request?

Assistance needed with jQuery toggle functionality and managing cookies

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

Passing intricate data structure from Angular to SignalR

JavaScript code to make titles slide in as the user scrolls

Ways to show a child's component element within the parent container

Expanding the size of select dropdown in Material UI to accommodate more options

Customizing data attributes for child components in Vue 2

What is the process for changing the name of a key in a MongoDB response

I am attempting to design a working Hamburger icon using HTML and CSS, but it is not collapsing as intended

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Jquery animated auto

CSS styling for a container element that enables word wrapping on child divs, while also being able to stretch to accommodate the width of its children