Search code examples
htmlcsssassjekyll

CSS for div Scrolling inconsistent

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:

enter image description here

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):

enter image description here

Solution

  • 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;
}