Prepare repository for merge

This commit is contained in:
Angelos Chalaris
2023-05-01 22:51:44 +03:00
parent 334b4dd6f8
commit e49fc829dd
100 changed files with 0 additions and 593 deletions

View File

@ -0,0 +1,36 @@
---
title: Hide scroll bars
type: snippet
tags: [visual]
author: chalarangelo
cover: by-the-lighthouse
dateModified: 2022-05-13T05:00:00-04:00
---
Hides scrollbars on an element, while still allowing it to be scrollable.
- Use `overflow: auto` to allow the element to be scrollable.
- Use `scrollbar-width: none` to hide scrollbars on Firefox.
- Use `display: none` on the `::-webkit-scrollbar` pseudo-element to hide scrollbars on WebKit browsers (Chrome, Edge, Safari).
```html
<div class="no-scrollbars">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.</p>
</div>
```
```css
div {
width: 200px;
height: 100px;
}
.no-scrollbars {
overflow: auto;
scrollbar-width: none;
}
.no-scrollbars::-webkit-scrollbar {
display: none;
}
```