In a website I am making, the scrollbar is messing up the horizontal alignment of my page, so I can use ;
html,body{
overflow-y:hidden;
}
But how can I still let the page scroll (just without showing the scrollbar)?
If you want a pure CSS solution than below snippet will help you achieve that with an ease
::-webkit-scrollbar {
display: none;
}
Demo (Only Chrome or Safari)
But since this is for webkit browsers only, you might have to use JS for a cross browser solution.
I think disable the scrollbar is not the solution, because in that case, you will need to find another solution to actually scroll the page...
like up & down keys, or make a mouse selection and go down...
...which is not an elegant solution in my opinion.
(not to mention that only will be affected webkit based browsers)
Instead, I suggest to fix your style so then the scrollbars will not screw up your layout.
One approach (without knowing your code, only guessing) is to use the box-sizing attribute.
Like:
#id {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
So with this, the width that you are giving to that #id will be recalculate when the margin, padding or the border changes.
But again.. only guessing, if you want to show the code that is affected by the scrollbars, we can find a proper solution for this.
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 have several elements with overflow: auto. It works nice. On macOS, scrollbars are automatically hidden when the user is not scrolling and appear on scroll.
On windows and on any browsers scrollbars are always visible. It makes an ugly rendering.
So how can I auto hide scrollbars on every OS and every browser when the user is not scrolling?
I know there is a lot of similar question but I haven't found a suitable answer
I found something ! I've never thought it could be so simple :
.my-elem {
overflow: hidden
}
.my-elem:hover {
overflow: auto
}
perfect-scrollbar is a
Minimalistic but perfect custom scrollbar plugin
It works with almost every web browser, including Internet Explorer.
<style type="text/css">
body {
overflow:hidden;
}
</style>
The code above hides both horizontal and vertical scrollbar.
Since every browser has its own default ‘user agent’ stylesheet, you may have to do a CSS Reset that resets the styling of all HTML elements to a consistent baseline. Then your HTML will appear the same on all browsers.
You can also Normalize. Normalize.css preserves useful defaults rather than "unstyling" everything.
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 creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
i have problems with IE8 :
http://immobilien.la-via.ch/
Website header is not on the right position.
If you open it in chrome or FF it works.
2nd problem: white area is not 960 width....
You need to properly contain your content inside your #nav div, you can do that by triggering the hasLayout effect on it, like so:
#nav {
zoom:1;
}
Are you aware that you mix table-design with div-based design? Just a recommendation: your layout can quite easily be designed with divs only (no tables). Cleaning your code up will help you a lot more than just fixing some issues that occur now in maybe IE8... have you seen your site in Safari/Chrome as well? And IE9+? Probably you should have a look, as you can see the consequences of your (sorry, it is not meant offensive, just nicely in order to help) messed up HTML code...
Also, don't apply a fixed height to a table/div if possible, as you probably want it to automatically adapt the height to the amount of text. You have some parts of your code where you use divs anyway already, just my recommendation would be to design the whole site on divs...