I'm working on a chat system and I would like a functional scrollbar to appear to go to the top / beginning of the conversation.
I use overflow-y CSS propery. When its value is egal to scroll, the scrollbar appears but it is not functional.
The best mode would be auto for overflow-y.
I need some help to make it work please.
Full code here.
Many thanks.
I saw the full code but there was no problem
overflow-y : scroll is ok
Related
I have a website that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.
The page has two elements, nav and main that each have overflow-y: scroll set. This is so they can be scrolled independently of one another. If I scroll the main element, and then hover over the pagination buttons at the bottom, the main element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.
The common thread here is that the pagination buttons and the GitHub symbol on the right both have svg elements. If I get rid of the svg element the bug doesn’t happen. Also if I remove overflow-y: scroll from the main element the bug does not occur.
I’ve also noticed that the issue might be somehow related to having height: 100% set on the <html> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.
Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!
You can fix this by adding the following to body where your grid rules are defined. Sadly, I have no idea why this solves the issue.
body {
…
grid-auto-rows: 1fr;
}
After spending hours and hours on this, the only way I could figure out how to fix it was to switch from CSS grid to flexbox. 🤷🏼♂️
This is the diff that fixed it, if you’re curious.
This is a bug related to safari version 12.1, which is fixed in Safari Technological Preview.
https://bugs.webkit.org/show_bug.cgi?id=197189
However as a workaround in the mean time.
Can you try
overflow-x:hidden, overflow-y: scroll,
height between 50 to 95vh for the specific container depending on your surrounding elements. This is going to have minimal safari jump on hover and probably empty space at the bottom.
Even after Safari bug is fixed, seems that the bug still occurs on some other scenario. I successfully reproduced a similar behavior on Fluent UI dropdown: https://github.com/microsoft/fluentui/issues/23668
The workaround in my case was to change dropdown item height from "auto" to "100%".
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
I'm adding the overflow-y parameter to "scroll" in my css in order to have scrolling bar in case of overflow..
My problem is that if the content is not overflowing - i'm still having the blank scroll bar.
How can i set the overflow to show the scrolling bar only when needed ?
You can set it to auto
overflow-y : auto;
It will only show scroll bar in case of overflow.
Refer : What browsers support `overflow-y`?
as mentioned before, the way to do this is by setting:
overflow-y: auto
When setting the property to auto, the browser determines how to handle the content, but generally, the scrollbar appears when it is required.
You would greatly benefit from learning more about the overflow property. There is a great article here that explains it nicely.
I have a div with a scrollbar in the main window who has also a scrollbar. So, if I use window.scrollbar then it will return the scrolling position of the main scrollbar or my div window's scrollbar? What I need to write if I want to know the position of both the scrollbars? Please explain so it will help me in understanding the stuffs such as frames and window.
window.scrollbar doesn't exist AFAIK, it may be some IE specific thing, but it's certainly not standard. window.scrollbars simply gives you information about whether or not the scrollbar is visible on the page.
You want, I believe, document.body.scrollTop which tells you how far the page is scrolled, or div.scrollTop on your div.
Is there a way to tell Safari / Webkit browsers and Firefox to scroll an element or a page while overflow is set to "hidden"?
I'm using overflow: hidden on the body-Element and it works for Opera only.
Any ideas?
Pretty sure this is one of those cases where Opera does it differently from everyone else. Overflow is supposed to prevent scrolling if its value is hidden, not just hide scroll bars.
If you really want to hide the scroll bars, but still want to scroll the window or its contents, you can use JavaScript / DOM script to do it.
Sorry but you have been mistaken, the overflow-x:hidden or overflow-y:hidden must be applied to the html element, not body element. But in just the case I have googled it and found these
link tell me if they did any help.
http://www.webmasterworld.com/javascript/3560359.htm
http://www.artmov.com/dev/snippets/apply-overflow-x-overflow-y-to-body-in-ie7-ie6-84/
(In this link I found the above mentioned statement.)
http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
In this link I found that you should apply directly overflow value in the <HTML> tag.
Hope it works!
If you're setting overflow: hidden on any element, you're explicitly telling it that the contents should be hidden, and therefore can't be scrolled to. If you want the contents to be scrollable, then you need to use overflow: auto. Why would you ever want to scroll something you're telling the browser it should not scroll? It's contradictory.