I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
Related
The problem is shown here:
https://codepen.io/team/css-tricks/pen/yLLqqgP
This is the important part:
html {
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
}
When setting height of section > 120, or similar this issue can get fixed, but this is a hack.
When I start scrolling, with a scroll wheel, then it always scrolls two sections, which makes the whole logic unusable.
I am using Chrome: 86.0.4240.183.
This codepen example is from: https://css-tricks.com/practical-css-scroll-snapping/ which is a very well known ressource for css examples.
This is a known bug in Chrome unfortunately, caused by using either html or a container with a background-color property for the scroll container. It only affects scroll wheels and not trackpads or touch scrolling on mobile. See this thread for a demonstration of the problem.
The simplest solution is to just use a nested container to hold the scroll, although, bizarrely, you may notice that the scroll-snap now has a small delay on it. This is the best that can be done with the current implementation:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
.container {
height: 100vh;
width: 100%;
overflow: auto;
scroll-snap-type: y mandatory;
}
h1 {
width: 100%;
height: 100vh;
scroll-snap-align: start;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
</div>
The problem is unfortunately compounded once you realise that 100vh is also non-static (read: extremely janky) on some mobile browsers due to the implementation of retracting UI, potentially leading to unstyled gaps as the html layer shows through before the container fills up the remaining space. I've spent hours wrestling with this issue this year and have yet to come up with a totally satisfactory solution, settling for media queries to reset back to html in most cases and targeting any edge cases with JS.
Here's one possible media query you could add for that:
#media (hover: none) and (pointer: coarse) {
html {
overflow: auto;
scroll-snap-type: y mandatory;
}
.container {
height: auto;
display: contents;
scroll-snap-type: unset;
}
}
After creating some basic messy sites I motivated myself to do something better and responsive. And I've got a problem.
The problem is when my site has more height than 100vh and I need to scroll it down, then appeares horizontal scroll.
I tried changing units on containers, removing left/right paddings, margins in some places added margin:0; padding:0; in my 'reset.css' file and still I have no idea what can I do to fix it.
I know that I can use overflow but I read that actually it's not fixing but hacking and I want to know why this happens.
My site looks kinda like this. Not exacly but kinda, and as you see there is little space to slide horizontaly.
Sample code :
.container{
display: flex;
flex-direction: column;
width:100vw;
https://codepen.io/anon/pen/zXLMPX
Also I'll be happy if u give me some advices/tips what I can do better in future, thank you!
The problem is coming from the fact that you haven't normalized your HTML yet. HTML naturally has some padding and margin. You should almost always remove this with the universal selector at the beginning of a project. You can also remove it from the html or body tags directly.
Here is a snippet without removing the default margin/padding:
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
Here is a snippet removing the margin/padding using the universal selector:
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: orange;
}
<div class="container"></div>
If you remove the margin on your body tag it should remove the horizontal scroll:
body {
margin: 0;
}
Alternatively you can use overflow-x: hidden to always hide the horizontal scroll.
On your container use
.container { width: 100%; }
the issue might also be with how codepen displays your page.
If you want to disable horizontal scroll entirely you can always do this
body { overflow-x: hidden; }
Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.
If I add the following css
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
This will solve the white-space problem but it will remove the horizontal scroll-bar and it is applied 100% width whatever the size of window but my site consists of fixed width. What can I do here?
Use min-width to achieve what you are looking for.
For Instance,
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
min-width:xxpx; /* enter a pixel value more than 1px that distorts the layout on resize */
}
PS: xxpx is a representative value. Use that value that is ideal for your issue resolve.
My html page displays empty disabled scrollbar, please see attached screenshot
How can i hide this scrollbar completely?
EDIT:
Sorry my mistake, i didn't mentioned that i am using overflow:hidden, but cannot hide this scroll bar.
i am copying my body code below
body {
color: #000000;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
I suspect it has nothing to do with overflow on your BODY element.
Even if you set overflow-y and overflow-x it's just like using the shorthand:
overflow: hidden;
same as for your margin, use only:
margin: 0;
// You have also other shorthand variants like:
// margin : top right bottom left;
// margin : topBottom rightLeft;
// margin : top rightLeft bottom;
// helps to keep your CSS file clear as possible.
So the probable issue lies in some most outer common parent element like some wrapper or container that has probably a style set to overflow: scroll;
like in this demo
Set overflow: hidden; in your CSS for the body:
body {
overflow: hidden;
}
Or to handle just the verticle scrollbar
body {
overflow-y: hidden;
}