文字滚动在ios设备不生效

问题：

设置顶部区域滚动时，安卓和pc上都可以正常滚动显示，ios上效果失效

解决：使用@media (prefers-reduced-motion: reduce) {
    .scroll-content {
      animation: none;
    }
  }

滚动区域html

滚动区域是图片加文字的组合，用数组循环出来的

<div class="scroll-container"><div class="scroll-content"><divclass="carousel"v-for="(item, index) in Data":key="index"v-if="item.value !== null && item.value !== undefined"><img :src="item.imgUrl" alt=""><div class="textMes">{{ item.value }}<span>{{ item.name }}</span></div></div></div></div>

js数据

引入的图片是静态区域的图片，所以要用require引入图片路径

Data: [{imgUrl: require(''),name: '北京',value: null},{imgUrl: require(''),name: '上海',value: null},{imgUrl: require(''),name: '深圳',value: null}, {imgUrl: require(''),name: '广州',value: null}, {imgUrl: require(''),name: '杭州',value: null}, {imgUrl: require(''),name: '苏州',value: null}, {imgUrl: require('@/assets/icons/svg/header5'),name: '厦门',value: null}],

css区域

以下代码主要是实现区域的布局，文字滚动用到的是animation: marquee 20s linear infinite;
 和 @keyframes marquee {0% { transform: translateX(100%);} 100% { transform: translateX(-300%); } }

而实现在ios上生效用的是

 @media (prefers-reduced-motion: reduce) {
    .scroll-content {
      animation: none;
    }
  }

.scroll-container {display: flex;position: relative;width: 100%;height: auto; /* 自动调整高度 */}.scroll-content {display: flex;align-items: center;//overflow: hidden;white-space: nowrap;width: 100%;animation: marquee 20s linear infinite;}@keyframes marquee {0% {transform: translateX(100%);}100% {transform: translateX(-300%);}}/* 媒体查询用于减少动画效果 */@media (prefers-reduced-motion: reduce) {.scroll-content {animation: none;}}.carousel {display: flex;align-items: center;padding: 10px;flex-shrink: 0; /* 防止项目缩小 */img {width: 9vw;height: 9vw;}.textMes {padding: 0 10px;font-size: 20px;font-weight: bold;color: #FFFFFF;border-right: 1px solid #ffffff;span {padding: 0 10px;font-weight: normal;font-size: 10px;color: #000000;}}}