微件:ScrollText

 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;

}

.scroll-text .scroll-text-content {

 word-wrap: break-word;
 word-break: break-all;
 position: relative;
 width: 100%;
 text-align: center;

}

.scroll-text.has-scroll {

 align-items: flex-start;

}

.scroll-text.has-scroll .scroll-text-content {

 text-align: center;

}

.scroll-text .scroll-text-content.enable-scroll {

 animation: scrollText linear infinite;

}

.scroll-text .scroll-text-content.enable-scroll:hover {

 animation-play-state: paused;

}

@keyframes scrollText-default {

 0% { 
   transform: translateY(0); 
 }
 100% { 
   transform: translateY(calc(-100% + 110px));
 }

} </style>

 function initScroll() {
   // 使用 class 选择器获取所有滚动文本容器
   var wrappers = document.querySelectorAll('.scroll-text');
   
   if (!wrappers.length) {
     setTimeout(initScroll, 100);
     return;
   }
   
   // 遍历每个容器并初始化
   wrappers.forEach(function(wrapper, index) {
     var content = wrapper.querySelector('.scroll-text-content');
     if (!content || content.classList.contains('scroll-initialized')) {
       return;
     }
     
     // 标记已初始化，避免重复处理
     content.classList.add('scroll-initialized');
     
     var text = content.textContent || content.innerText;
     var charCount = text.replace(/\s+/g, ).length;
     var threshold = parseInt(content.getAttribute('data-threshold')) || 50;
     var speed = parseFloat(content.getAttribute('data-speed')) || 10;
     
     if (charCount > threshold) {
       // 为父容器添加标识类，表示需要滚动
       wrapper.classList.add('has-scroll');
       
       // 为每个实例创建唯一的动画名称
       var animationName = 'scrollText-' + index + '-' + Date.now();
       content.classList.add('enable-scroll');
       
       // 等待DOM更新后计算实际高度
       setTimeout(function() {
         var contentHeight = content.scrollHeight;
         var wrapperHeight = wrapper.offsetHeight;
         var scrollDistance = contentHeight - wrapperHeight;
         
         // 动态设置滚动距离
         if (scrollDistance > 0) {
           // 为当前实例创建独立的动画样式
           var styleId = 'scroll-text-animation-' + index;
           var existingStyle = document.getElementById(styleId);
           if (existingStyle) {
             existingStyle.remove();
           }
           
           var style = document.createElement('style');
           style.id = styleId;
           style.textContent = `
             @keyframes ${animationName} {
               0% { 
                 transform: translateY(0); 
               }
               100% { 
                 transform: translateY(-${scrollDistance}px); 
               }
             }
           `;
           document.head.appendChild(style);
           
           // 计算动画时长并应用动画
           var duration = Math.max(speed, charCount / 8);
           content.style.animationName = animationName;
           content.style.animationDuration = duration + 's';
         } else {
           // 如果实际上不需要滚动，移除滚动类
           wrapper.classList.remove('has-scroll');
           content.classList.remove('enable-scroll');
         }
       }, 10);
     } else {
       // 字符数未达到阈值，确保没有滚动类
       wrapper.classList.remove('has-scroll');
     }
   });
 }
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initScroll);
 } else {
   initScroll();
 }

})(); </script>

微件

微件:ScrollText

来自卡厄思梦境WIKI