Vue开放中遇到需要滚动的需求怎么办？

日常开发中，我们经常会遇到一些因为布局限制而无法完全展示的内容，这个时候，我们就需要让内容自己滚动来解决这个问题。

第一种情况：文本内容滚动

1.html部分

<div class="scroll-box">
    <p class="scroll-content-item">
      <!-- 此处可以放置需要滚动的内容-->

    </p>
</div>

2.CSS部分

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*当内容超过，出现滚动条*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}

3.示例：

          <!-- 创建外部展示容器 -->
          <div class="scroll-box">
            <p class="scroll-content-item">
              <span class="ns-title">（一）查苗补种。</span>
              <span class="ns-content"
                >小麦出苗后要及时查苗，出现缺苗断垄的地方，开沟补种。</span
              >
            <br>
              <span class="ns-title">（二）因地因苗适时镇压。</span>
              <span class="ns-content"
                >对于丘陵、山区部分播种偏早、播量偏大的冬前可能旺长麦田，要及时进行深中耕断根或镇压，控旺转壮。</span
              >
              <br>
              <span class="ns-title">（三）化学除草及防控病虫。</span>
              <span class="ns-content"
                >要根据苗情、冬前气温情况和麦田草害发生种类，选准对路农药，适时开展化学除草。</span
              >
              <br>
              <span class="ns-title">（四）看墒适时节水冬灌。</span>
              <span class="ns-content"
                >要根据天气条件、整地质量、小麦苗情和土壤墒情合理确定是否进行冬灌。</span
              >
              <br>
              <span class="ns-title">（五）科学防灾减灾。</span>
              <span class="ns-content"
                >由于今年晚播面积大，冬前弱苗占比高，要注意及早做好小麦防冻准备，一旦冻害发生，要分苗情、分灾情、分区域及时采取早春追肥浇水等补救措施有效应对，把损失降到最低。
              </span>
            </p>
          </div>

<style>

.scroll-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  overflow: hidden; /*当内容超过，出现滚动条*/
}
.scroll-content-item{
  color: #FFFFFF;
  font-size: 16px;
  animation: run 15s 1s linear infinite;
}
.ns-title{
  color: #33ffca;
  font-size: 14px;
  font-weight: bold;
}
.ns-content{
  color: #FFFFFF;
  font-size: 12px;
  line-height: 35px;
  font-weight: 400;
}
@keyframes run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
20% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

95% {
    -webkit-transform: translate3d(0, -350px, 0);
    transform: translate3d(0, -350px, 0);
}
100% {
  -webkit-transform: translate3d(0, -350px, 0);
  transform: translate3d(0, -350px, 0);
}
}
</style>

第二种情况：列表循环滚动

vue-seamless-scroll插件的使用教程在这里，注意区分vue2和Vue3版本

用js来实现。

html：

<div class="box">
 <p class="animate">
 文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
 </p>
</div>

css：

、应用场景

左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应

二、思路

首先把这个问题分步解决，需要攻克以下两点：

1、让两个div并排到一行

2、让一个div宽度固定，另个div占据剩下宽度的空间

关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；

关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。

三、实现

1、html

2、css

注：

1、fixedColumn 里注释的方法即绝对定位的实现方式，取消注释后把float那句注释掉，可以实现相同的效果

2、使用float需要注意清除浮动造成父元素塌陷的问题（这里不用清除，因为自适应列和固定列一样高，在标准流中可以撑起父元素）

四、扩展

如果把上面的问题稍微改变一下，要求展示一个左中右布局，而且左右固定，中间自适应，这要如何实现呢？

估计很多人会这样想：

css中.flexibleColumn样式添加一个属性：margin-right: 40px;

html中再追加一个固定列，在右侧浮动：

然后运行的效果是...左中布局，右边空白，浏览器出现滚动条，右固定列换行后右浮动了。

然后我们做一个小小的改动——把刚才添加的右浮动固定列的dom放到自适应列前面，也就是说html的dom顺序是左浮动，右浮动，自适应的顺序！html如下：

效果就“神奇”的实现了~

这里一个注意点就是：浮动元素在dom中要在非浮动元素的前面，否则非浮动元素后面的浮动元素会换行。

具体原理待研究..网上好像没查到，有谁知道的话希望告知~

总结：一定要自己实现试试，注意只有固定列脱离了文档流，自适应列还在文档流中！其他没什么要说的了，但是应该还有更好的方法，等我看到了一并总结过来~

想要学习更多的编程技术，不如选择重庆IT培训，千锋重庆100%面授式课程，拒绝视频同步授课，拒绝双元视频班教学，拒绝直播授课，教师一对一指导学员做项目，全新打造“主流技术+前沿技术+企业级联动”教学课程，重新优化和定义编程语言，采用最新版本技术开展教学，致力于为学员打造最牛的、最新的技术，助力学员拿下BAT级企业Offer。

千锋重庆IT技术开发培训，让你在同样的起跑线，跑出不一样的高度。

在线咨询

上一篇：什么是Web过滤？防火墙中的什么是Web过滤包含哪些
下一篇：什么都能查的网站大全，建议收藏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。