CSS for div 滚动不一致

Question

我正在尝试使用 html 和 sass 创建一个 "bookshelf"（注意：这主要基于 http://ameijer.nl/2013/03/bookshelf-css-only/）你可以看到我的版本这里的概念：

https://mainstringargs.github.io/bookshelf.html

我试图只在特定 "bookshelf" 必要时显示水平滚动条——例如，在上面的 "Read" 架子中——但在不需要时不显示它—— - 参见 link 处的 "Reading" 和 "On Deck"。

我预计使用 "overflow: auto;" 会给我这种效果，但这似乎导致滚动条总是出现。

相关的 sass 文件在这里：https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss

如何只在每个特定书架需要时才显示水平滚动条？

例如，即使没有足够的书，当前显示的两个书架上都有水平滚动条看起来像这样：

我希望它看起来像这个模型（注意底部书架没有水平滚动条，因为那里没有足够的书，但顶部书架有，因为有足够的书可以滚动）：

Answer 1

如果您只想在必要时应用水平滚动而不是垂直滚动，请查看您的代码。

在您的 class 姓名上使用以下内容：

.books {
    overflow-x: auto; // Auto horizontal
    overflow-y: hidden; // Disable vertical scrolling
}

试试看是否有效。无需添加滚动，但让浏览器决定 "auto" 集。

Answer 2

你可以使用 flexbox 让 .books 溢出 vs .shelf 只是一定要从 .books, .shelf:after:

中删除 width: 1470px;

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

CSS for div 滚动不一致

CSS for div Scrolling inconsistent

html

css

sass

jekyll