在
html
页面
中
，我们有时需要让
div
中
的
内容
超出后自动显示
滚动
条，我们可以这样设置：
复制代码代码如下: <
div
class=”classlist”> <
div
class=”autoScroll”> <asp ID=”rblClasses” runat=”server” DataTextField=”className” DataValueField=”classID” ForeColor=”#FF4040″> </asp>
<asp:ImageButton ID=”imgSure” runat=”server” Ima
<
div
class='container'>
<
div
ref="contentRef" class="content">
<
div
v-for="item in 20" :key="item" class="contentItem">{{item}}</
div
>
</
div
&
使用
CSS
3来实现
若要用
CSS
3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。
<!DOCTYPE
html
>
<
html
lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
h5页面实现固定
div
内
滚动
实现方法：
注意： 因为h5页面没有scroll-view这样的组件，这里使用
css
实现
滚动
，
父元素flex布局，高度100%，页面从上到下正常铺，需要实现
滚动
的
div
css
设置 flex = 1； overflow: scroll;
//需要
滚动
的
div
样式设置
.scroll{
display:flex；
flex = 1；
overflow: scroll;
实现效果：
1、overflow:auto;
当
内容
宽度超出
div
宽度，或者
内容
高度超出
div
宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直
滚动
条；
2、overflow-x:auto;
当
内容
宽度超出
div
宽度，自动出现水平
滚动
条；
3、overflow-y:auto;
当
内容
宽度超出
div
高度，自动出现垂直
滚动
条；
设置好后会自动换行；
通过使用
CSS
属性`overflow:hidden`可以去除
div
的
滚动
条，不过也会同时禁用
div
的
滚动
效果。不过，我们可以通过添加一个容器
div
，将
内容
放在该容器内，并在该容器上使用`overflow:auto`属性，这样就可以实现
div
的
滚动
效果，同时去除
滚动
条的显示。下面是一个示例的代码：
<style>
.scroll-container {
width: 300px;
height: 300px;
overflow: auto;
.scroll-content {
width: 100%;
height: 100%;
overflow: hidden;
</style>
<
div
class="scroll-container">
<
div
class="scroll-content">
<!-- 这里是需要
滚动
的
内容
-->
</
div
>
</
div
>
在上面的代码
中
，我们使用了两个
div
元素，一个是容器
div
，另一个是
内容
div
。容器
div
通过设置`overflow:auto`属性实现了
滚动
效果，而
内容
div
则设置了`overflow:hidden`属性，去除了
滚动
条的显示。这样就能同时实现
滚动
效果和去除
滚动
条了。当然，如果需要定制
滚动
条的样式，可以使用自定义
滚动
条插件来实现。
