前言：

在学习HarmonyOS过程中，使用div组件时，当页面设置元素内容区超过元素本身大小，我们通常会采用overflow的css样式去使得元素内容超过元素大小时，进行滚动显示并展示滚动条。
例如：

问题描述

通常，我们在使用overflow:scroll样式时，元素滚动的方向为纵向滚动。而当我们想要实现横向滚动视图时，查询华为官方开发文档发现：

其中overflow:scroll样式并不支持横向滚动。

原因分析：

官方文档对此有以下说明：

根据我对官方说明的理解，当我们使用overflow:scroll设置纵向滚动时，我们采用了flex布局的column即纵向布局，同时我们没有限制容器的高度，这时我们可以看做将容器方向设置为纵向，所以当元素内容超过元素大小时，就会纵向滚动，相关效果见前言，代码如下：

//css部分.container {    display: flex; /**响应式布局**/    flex-direction: column;    width: 100%;/**height: 100%;**/    overflow: scroll;}.boxview{    width: 100%;    height: 12%;    border-bottom: 1vp solid  black;    display: flex;    justify-content: center;    align-items: center;}

//js部分export default {    data: { arrs:[]    },    onInit() //onInit页面初始化加载    { //arrs放100个字符串类型的数据 // var和let区别： //javascript是个弱类型语言  java是个强类型语言 for(let  i =0 ; i<=100; i++) {     //数组放入数据  第+i+项     this.arrs.push("第"+i+"项"); }    }}

hml部分<div class="container">    <block  for="{{arrs}}"> <div  class="boxview">     <text>{{$item}}</text> </div>    </block></div>

解决方案：

同理，我们要想实现横向滚动视图，只需要采用了flex布局的row即横向布局（flex布局默认为row横向），同时我们不去限制容器的宽度，这时则可将容器的方向视作为横向。当元素内容超过元素大小时，我们就可以实现横向滚动视图。

实现效果如下（图片并不明显）：

使用的相关代码如下：

css相关代码.container {    display: flex;    flex-direction: column;    width: 100%;    height: 100%;    background-color: powderblue;}.topview{    width: 100%;    height: 22%;    border-bottom: 1px solid black;}.swiperview{    width: 100%;    height: 100%;}.twoview{    display: flex;    flex-direction: row;    overflow: scroll;    height: 22%;    border-bottom: 1px solid black;}.box1{    width: 100%;    height: 100%;}.box2{    width: 42%;    height: 100%;    margin: 22vp;}.imgview{    width: 100%;    height: 100%;    border-radius: 10vp;}.threeview{    display: flex;    width: 100%;    flex-direction: column;    overflow: scroll;    border-bottom: 1px solid black;}.box3{    width: 100%;    height: 25%;}

hml代码<div class="container">    <div class="topview"> <swiper class="swiperview" autoplay="true" indicator="true">     <block for="{{swiperdatas}}">  <div class="box1">      <image src="{{$item}}"></image>  </div>     </block> </swiper>    </div>    <div class="twoview"> <block for="{{imagedatas}}">     <div class="box2">  <image class="imgview" src="{{$item}}"></image><!--  {{$idx}}-->     </div> </block>    </div>    <div class="threeview"> <block for="{{textdatas}}">     <div class="box3">  <text>{{$item}}</text>     </div> </block>    </div></div>

export default {    data: { swiperdatas:["common/images/a1.png","common/images/a2.png","common/images/a3.png"], imagedatas:["common/icons/a1.jpg","common/icons/a2.jpg","common/icons/a3.jpg","common/icons/a4.jpg","common/icons/a5.jpg","common/icons/a6.jpg","common/icons/a7.jpg","common/icons/a8.jpg","common/icons/a9.jpg"], textdatas:[0,1,2,3,4,5,6,7,8,9]    }}