I'm using Chrome version 84.0.4147.89, and have a div that uses
overflow-y:scroll;
The scrolling functionality works, however no scroll bar shows. It does show in IE. I'm required to get it show as users with no mouse or touchscreen find it very difficult to scroll without the bar visible.
I have tried
overflow-y:scroll!important;
but that did not work either.
I have also tried disabling 'Use hardware acceleration when available' as I saw it recommended in another thread, but that also did not work.
How do I make the scroll bar appear for Chrome?
Thanks.
I think you have to declare a height. Here's an example of what I'm using.
div {
width: 30vw;
height: 49.75vw;
min-height: 1em;
overflow-y: visible;
overflow-x: hidden;
direction: ltr;
/*position of scroll bar can use rtl if wanted, but use div * {direction: ltr;} if you do.} */
scrollbar-width: thin;/*fancy width*/
scrollbar-color: #f3f0dd #154734;/*fancy colors for Firefox*/
}
div::-webkit-scrollbar {
width: 11px;
}
div::-webkit-scrollbar-track {
background: #154734;
}
div::-webkit-scrollbar-thumb {
background-color: #f3f0dd;
border-radius: 6px;
border: 3px solid #154734;
}
Related
first of all, I have read all the related topics created and none has worked for me.
I have this iframe 100% of the width and height of the screen
<iframe src="https://site.test" frameborder="0" id="iframe" style="display: block; overflow: hidden; border: none; height: 100vh; width: 100vw;"></iframe>
I tried this and it doesn't work for me
iframe { overflow:hidden; }
But it does not work. Be careful, I need to hide them, not disable them, so
scrolling ="no"
It does not serve me.
you can edit your code. remove display:block in inline css.
#iframe{
scrollbar-width: none;
-ms-overflow-style: none;
}
If you have access to the iframe then use these line of codes inside the iframe page CSS:
/* Works for Chrome */
::-webkit-scrollbar{width:0}
And
/* For Firefox and Microsoft Edge or IE */
html{scrollbar-width:none;-ms-overflow-style:none;}
how to?
a {
position: fixed;
overflow-y: hidden;
top: 0;
left: 0;
}
I'm trying hide scrollbar on mobile. Everything looks well on desktop (no srollbar), but when I check on some android device (ipad) - I can still see grey, thin thumb. Is possible to hide predefined scrollbar from browser.
My code (work well on desktop).
body::-webkit-scrollbar {
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
}
Use -webkit-appearance:none to hide the scrollbar.
::-webkit-scrollbar {
-webkit-appearance: none;
}
Try this
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
This was useful for me.
::-webkit-scrollbar { display: none; }
try this hide's it on screens less than 768px
body{
height: 1000vh
}
#media screen and (max-width: 768px){
::-webkit-scrollbar {
-webkit-appearance: none;
}
}
<p>Yao</p>
None of the previous answers worked for me. I had to add:
main {
overflow: hidden;
}
Then on mobile view through the browser there was no scroll bar to the right, but the scroll functionality still works.
I have a container which has position:fixed with scrolling content inside. I'm displaying this as a chat feature on mobile devices but on mobile Safari, the scrolling content inside the position:fixed container stops scrolling suddenly and starts to scroll the container itself.
Open this link on mobile Safari to see the effect: http://jsbin.com/ruyito
Editable example here: http://jsbin.com/ruyito/edit?html,css,output
The question: Why does my container div start to scroll its position suddenly and stop scrolling the content? (On Chrome on Android, it works without issue)
Note: if you're having trouble triggering this bug, keep scrolling the content up and down quickly for 10 seconds or so, eventually it will suddenly stop scrolling.
I've come across this issue several times when trying to use use overflow: scroll div's in iOS Safari.
My understanding it that it's to do with the overscrolling/elastic scrolling animations. What seems to happen is:
When a certain container (i.e. the window, or your scrolling div) is running these animations the events get locked to that container.
When an overflow: scroll container hits the top/bottom of it's scroll height it then starts scrolling the parent container - this is also the case in Chrome.
You may notice in your example that when the scrolling stops working, not touching the screen for a small amount of time (say 500ms?) then trying to scroll again works.
What I think is happening is that when you hit the bottom/top of your scrolling container, the events are getting locked to the parent, in this case the window. While you keep interacting in this state, your events never make it to your scrolling container, and so it appears to be unresponsive.
I've had some success in the past by not propagating the touch events from my scrolling container up to the document:
$('.chat-container-mobile').on({
'touchstart': _onTouchStart,
'touchmove': _onTouchMove,
'touchend': _onTouchEnd
});
function _onTouchStart(e) {
e.stopPropagation();
}
function _onTouchMove(e) {
e.stopPropagation();
}
function _onTouchEnd(e) {
e.stopPropagation();
}
Note: This will not be a fix in many situations, as you often need to retain default window behaviour. In this case though, you seem to have a fixed layout which doesn't require default document scrolling behaviour. Additionally, you will likely still see the same result if you attempt to scroll by touching on the top 'Group chat' bar or bottom 'Type message' bar, then quickly afterwards try to scroll within your container.
You could also try using e.preventDefault on $(document) for these touch events. This prevents the window from reacting to these user inputs in the first place, again though this can cause many other problems if you need to retain browser defaults.
Also try to localise these bindings only in situations where it's a problem. So check for iOS and Safari before binding onto the events.
I'll come back with any extra findings the next time I try to deal with the the problem - which, let's be honest, is almost every project.
Good luck!
Just try to add bottom:0 to .chat-container-mobile { bottom:0 }
I dont quite know what the deal is here. It might be that safari freezes when moving it that quickly because it still technically moves the container the way it should by the inspector tools definition, just does not portray it on the screen.
One thing you could try that I did in the inspector tools and seems to solve the issue is reverse engineering what you have. Try this changeup to your code. note the positioning/height/padding on your .chat-container-mobile and z-index/bottom/positioning on the other two elements.
<style>
.chat-container-mobile {
position: fixed;
background-color: #EBEBEB;
padding: 15px;
display: block;
margin: 0;
top: 0px;
color: #444444;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 50px);
padding: 75px 15px 125px;
}
.chat-mobile-header {
position: fixed;
z-index: 10;
width: 100%;
background-color: white;
color: #444444;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
font-weight: 500;
text-align: center;
top: 0;
margin: 0;
padding: 17px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.2);
}
.chat-field-mobile {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
margin: 0px;
padding: 12px 12px 10px 10px;
background-color: #EBEBEB;
border-top: 1px solid rgba(68, 68, 68, 0.1);
}
</style>
doing it this way those other elements just lie on top of your chat window instead of trying to stack or force your pieces together.
Hope this helps mate!
I opened the link ( http://jsbin.com/ruyito) iPhone 6 - Safari and everything looks fine. Content scrolls as expected. I tried many times up and down scroll but nothing happened.
At which version this happens? I couldn't say anything without experience the bug but i think it can be virtual scroll issue.
You can disable this by adding this.
.chat-container-mobile {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
I have a scroll bar inside a dropdown and I want it shows up all the time like this:
However, this only works in some old version safari and firefox. And in my new safari/chrome, there is no scroll bar at all.
How can I fix that so I can make sure for most browsers, the scroll bar will be there all the time?
Thanks so much for your help!
I think there was a change of behaviour post Mountain Lion where scroll bars are hidden by default. Try this snippet; I've used it to force scroll bars to display.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track {
background-color: rgba(0,0,0,.5);
width: 7px;
}
In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone.
I've noticed that some pages have it disabled, like gmail and the "new tab" page.
How can I disable "overscrolling"? Are there other ways in which I can control "overscrolling"?
The accepted solution was not working for me. The only way I got it working while still being able to scroll is:
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:
body {
overscroll-behavior-y: none;
}
This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.
You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Browser Support
As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation
More information
Chrome 63 release video
Chrome 63 release post - contains links and details to everything I wrote above.
overscroll-behavior CSS spec
MDN documentation
One way you can prevent this, is using the following CSS:
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This way the body has never any overflow and won't "bounce" when scrolling at the top and bottom of the page. The container will perfectly scroll its content within. This works in Safari and in Chrome.
Edit
Why the extra <div>-element as a wrapper could be useful: Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
Find a screenshot below:
You can use this code to remove touchmove predefined action:
document.body.addEventListener('touchmove', function(event) {
console.log(event.source);
//if (event.source == document.body)
event.preventDefault();
}, false);
Try this way
body {
height: 100vh;
background-size: cover;
overflow: hidden;
}
html,body {
width: 100%;
height: 100%;
}
body {
position: fixed;
overflow: hidden;
}
position: absolute works for me. I've tested on Chrome 50.0.2661.75 (64-bit) and OSX.
body {
overflow: hidden;
}
// position is important
#element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
Bounce effect cannot be disabled except the height of webpage equals to window.innerHeight, you can let your sub-elements scroll.
html {
overflow: hidden;
}