系统消息定宽横向滚动以及定高纵向滚动

系统消息定宽横向滚动

要求:

• 多条消息横向循环滚动

效果:

原理:

• 放消息的外部盒子定宽, 超出隐藏, 设置 white-space: nowrap; 使得文本不换行, 一行显示
• 每条消息设置 display: inline; 使得所有消息拼接在一行

实现代码:
html:

 <!-- 横向滚动 -->
 2       <div
 3         class="transverse_scroll"
 4         v-show="messageList.length && userInfo && userInfo.id"
 5       >
 6         <!-- 消息icon/数量 -->
 7         <div class="icon_box" @click="goLink('messagePage')">
 8           <i class="el-icon-bell"></i>
 9           <div class="messageNumber" v-if="messageNumber > 0">
10             {
   {
    messageNumber }}
11           </div>
12         </div>

13         <!-- 消息列表 -->
14         <div id="scroll_div" ref="scrollDiv">
15           <div id="scroll_begin" ref="scrollBegin">
16             <span
17               class="pad_right"
18               v-for="(item, index) in messageList"
19               :key="index"
20               >{
   {
    item.content }}</span
21             >
22           </div>
23           <div id=