[JavaScript知识库]学习笔记六

这次的记录一下关于html横向滚动区域的实现：

以下为几种横向滚动的实现方式，不论哪种方式中，overflow-y: hidden都是必须的，该属性会禁用竖直方向的溢出。

以下为一个简单的效果图：

?

1、flex容器：

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv2{
    display: flex;
    background-color: wheat;
    flex-direction: row;
    height: 95%;
    padding: 5px;
    overflow-y: hidden;
    column-count: 1;
}
p { min-width: 200px; }

.container为最顶层容器

2、column容器：

.container {
    font-size: 14px;
    width: 700px;
    height: 500px;
    margin: 15px;
    background-color: whitesmoke;
    box-shadow: gray 1px 1px 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}
#targetDiv2{
    display: flex;
    background-color: wheat;
    flex-direction: row;
    height: 95%;
    padding: 5px;
    overflow-y: hidden;
    column-count: 1;
}
p { min-width: 200px; }

横向滚动条有时能够美化页面内图片、盒子的摆放，使用美观。