image1
in this image, there is no scroll bar but if I scroll down inside diagram component div element scrollbar will occur
image2 with scrollbar
how can I hide that scrollbar without setting overflow: hidden
references
Just use the CSS of it like that:
selector-with-overflow::-webkit-scrollbar {
width: 10px;
visibility: hidden;
display: none;
}
notice doesnt work on all browsers but should work on the most common ones
I'm not sure why you'd ever want to hide the indication that a page is overflowing, see this JSFiddle: http://jsfiddle.net/2nT38/868/ for the css for a scrollbar that isn't visible yet still scrollable. Here's the breakdown:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 0px;
}
::-webkit-scrollbar:horizontal {
height: 0px;
}
Hope this helps!
Related
The intent is to have the ckEditor toolbar fixed at the top while being able to scroll through the content. Currently, toolbar gets scrolled off the screen as shown in the GIF image below.This component is on a page that is scrollable. So the position:fixed; does not work as I tried that.
The label Question Stem stays at the top and is wrapped by Vuetify Toolbar component.
the ck-toolbar class on the toolbar items has the following CSS
.ck.ck-toolbar {
align-items: center;
display: flex;
flex-flow: row nowrap;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
I have added the following CSS to make the content scrolable.
#ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
position: relative !important;
z-index: 10;
}
#ckEditorQuestionStem .ck.ck-editor__main {
max-height: 400px;
overflow-y: auto;
position: relative !important;
}
The HTML for this is shown in the screenshot below
I tried the method posted here. Also tried adding viewportTopOffset: 50, under toolbar of the editor config. No luck so far.
I reolved this by applying the following style on the parent element of ckEditor
style="contain: content;"
And keeping the toolbar position as fixed.
#ckEditorQuestionStem .ck.ck-toolbar > .ck-toolbar__items {
position: fixed !important;
margin-right: 5px;
margin-left: -6px;
min-height: 100px;
top: 0px;
z-index: 2;
}
Posting the answer in case someone finds it helpful. Here is the current editor window with scrollable body and fixed toolbar. This is more desirable than a sticky toolbar.
This was helpful in arriving at the solution.
I want the vertical scrollbar for my div to be invisible, but still allow vertical scrolling.
I've tried using overflow-y: hidden but that disables scrolling.
I've tried webkit element::-webkit-scrollbar but that affects horizontal scrollbars too.
I would have thought that webkit's :vertical state would allow me to do it but it doesn't do anything. See codepen: (https://codepen.io/numberjak/pen/MWgOMqd)
Other questions look at BOTH scrollbars, I just care about ONE scrollbar.
<div class="scroll"><div class="large-content"/></div>
.scroll {
overflow: auto;
max-width: 20rem;
max-height: 20rem;
background-color: black;
}
.scroll::-webkit-scrollbar:vertical {
display: none;
}
.large-content {
min-width: 100rem;
min-height: 100rem;
background-color: red;
}
Try this css code..
css
.large-content {
background-color: red;
width: 100%;
height: 100%;
}
You can do the following to hide scrollbars:
-webkit- (Chrome, Safari, newer versions of Opera):
.scoll::-webkit-scrollbar { width: 0 !important; }
-moz- (Firefox):
.scroll { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.scroll { -ms-overflow-style: none; }
Important points to be considered before hiding the scroll bar:
Preferably hide scrollbars only if and when all content is visible else the user may skip the content.
Avoid horizontal scrolling on web pages and do not hide horizontal scroll bar as they can make content difficult to read
If at all, hiding scroll is required: Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Reference
I want to disable scrolling for when there's a popup, but I hate how the entire page changes size when you add/remove the scrollbar. Is there a way to disable scrolling without hiding the scrollbar?
Kind of like when you set overflow:scroll to an element that doesn't have enough content to scroll: it still shows the scrollbar but it's disabled.
//when popup is open, disable scroll on body
body.popupOpen {
overflow: hidden;
}
Make sure that the overflow (the scroll bar) is on the body element then add an overlay that will simply cover the body and its scroll bar when the popup is shown.
Here is a simplified example with only the overlay where you cannot scroll:
body {
overflow: auto;
margin: 0;
max-height: 100vh; /* no more than the height of the viewport*/
}
html {
overflow: hidden; /* This one is important to avoid the propagation */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.content {
min-height: 500vh;
}
<div class="overlay">
</div>
<div class="content">
</div>
The answer is no, but you can set 'hidden' and create a element to simulate the scrollbar, but why would you do this, it only makes the user confused.
You can create a div that fullfils the whole page view, and just make it transparent, this way you can just enable/disable the div scroll to mantain a scrollbar:
.theDivInactive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
}
and switch the class when the popup is on the screen:
.theDivActive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: scroll;
}
`
I have fixed the issue the same way bootstrap does. Just in case other methods doesn't work for you, here's the JS trick to calculate scrollbar width for a given browser. Then on modal open, you can set the padding-right to body element:
const documentWidth = document.documentElement.clientWidth;
const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
document.body.style.paddingRight = `${scrollbarWidth}px`;
Note: this will only work well if you set overflow-y: scroll to popup bg or put the popup over the white strap that was created as the side effect of the padding-right property.
Note 2: If elements are positioned absolutely relative to body width, they will still "jump" so you need to add padding to them as well or wrap them with div that has position: relative
I have a site with a full screen overlay nav, which when triggered hides the overflow on the html element. This is to stop the page behind the nav being scrolled when the nav is open.
Stripped down SCSS (when nav is active) looks like this:
html.nav-is-active {
overflow: hidden
}
nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1600000;
}
My problem is when the nav is open the scrollbar disappears causing the page to jump - this is especially disorientating as there is a close button on the nav overlay which is supposed to line up with a menu button on the site.
My question is how can I best solve this? I can remove the overflow:hidden from the html element to preserve the scrollbar, but that then means the site can be scrolled unintentionally when the nav is open.
Any help appreciated
Mike
This is really hacky, but it should do what you want...
html {
overflow-y: hidden;
}
body {
overflow-y: scroll; // causes an empty scrollbar
height: auto; //set height = content so body can't overflow
}
You can make your scrollbar visible the same way in the overlay.
OR If you can figure out the width of the scrollbar (typically 15px on Mac and I think similar in Win 10) you can subtract from the overlay size or add padding. This is slightly better than setting the overlay to overflow-y: scroll since it won't cause scrolling INSIDE the overlay on small screens.
nav.active {
width: calc(100vw - 15px); // could be done with javascript
}
An alternative to block scroll without overflow: hidden; is position: fixed; overflow-y:scroll; so simply change this:
html.nav-is-active {
overflow: hidden;
}
with this:
html.nav-is-active {
position: fixed;
overflow-y:scroll;
}
You'll se an empty scroll bar, but the page will not "jump" anymore.
As we all know, you can hide a scrollbar in Safari and Chromium with the following CSS snippet:
::-webkit-scrollbar {
display: none;
}
However, this doesn't seem to work when -webkit-overflow-scrolling is set to touch, specifically on iOS. Chromium properly hides the scrollbar.
Is this a WebKit bug, or is there a way to hide a scrollbar AND enable fluid (touch) scrolling? It seems to be possible (perhaps with js?), on the mobile version of Google. Looking through the page source and googling my answer didn't seem to help though.
It seems that currently (as of January 2017) the only way to get around this is by wrapping the scrollable element inside of a parent div and manually hiding the scrollbar from view.
This can be achieved by applying a fixed height/width and overflow: hidden; to the parent div. You can then add extra padding or height/width to the original element to, essentially, push the scrollbar out of view.
Mark Otto tweeted about the issue back in June 2016. Here is an example of his workaround: https://output.jsbin.com/lohiga.
The basic idea goes something like this:
<header>
<div> <!-- parent wrapper added -->
<nav>
First link
Link
Link
Link
Link
Link
Link
Link
Last link
</nav>
</div>
</header>
CSS:
header {
margin: 20px 0;
padding: 10px 5px;
text-align: center;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
// Parent wrapper
div {
height: 30px;
overflow-y: hidden; // "crop" the view so the scrollbar can't be seen
}
// Original scrollable element
nav {
padding-bottom: 20px; // extra padding to push the scrollbar out of view
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
nav a {
display: inline-block;
padding: 5px 10px;
}