如何让css无限动画滑块在移动设备上工作？

Question

我正在创建一个价格滚动条/滑块，它在台式机/笔记本电脑上完美运行，但我无法让它在移动设备上正常运行而不出现故障。

在移动设备上，股票代码项目只会出现几秒钟，然后消失，没有任何滑动动画。

直播JSFiddle

下面还有片段。

编辑 - 如果我从

display-flex

中删除

.ticker-container

，效果很好，但股票代码项目超出了 div，因此滑块在显示所有股票代码项目之前重置..

这是我迄今为止所拥有的示例：

const tickerMap = {
    'bitcoin': 'BTC',
    'ethereum': 'ETH',
  'binancecoin' : 'BNB',
  'bitcoin-cash' : 'BCH',
    'litecoin': 'LTC',
    'ripple': 'XRP',
  'chainlink' : 'LINK',
  'matic-network' : 'MATIC',
    'cardano': 'ADA',
    'dogecoin': 'DOGE',
    'shiba-inu': 'SHIB',
    'solana' : 'SOL',
    'pepe' : 'PEPE',
  'avalanche-2' : 'AVAX',
  'polkadot' : 'DOT'
};

//########################## FETCH PRICES ##########################//
async function fetchCryptoPrices() {
  try {
    const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,ripple,solana,pepe,binancecoin,avalanche-2,chainlink,matic-network,bitcoin-cash,shiba-inu,litecoin,polkadot,cardano,dogecoin&vs_currencies=usd');
    const responseData = await response.text();
    console.log('Response from server:', responseData);
    const data = JSON.parse(responseData);
    return data;
  } catch (error) {
    console.error('Error fetching cryptocurrency prices:', error);
    return null;
  }
}
//#############################//


//######## CREATE TICKER ITEMS ########//
async function createTickerItems() {
  const ticker = document.getElementById('ticker');
  ticker.innerHTML = ''; // Clear previous ticker items
  const cryptoPrices = await fetchCryptoPrices();
  if (cryptoPrices) {
    Object.entries(cryptoPrices).forEach(([symbol, price]) => {
      const tickerItem = document.createElement('div');
      tickerItem.classList.add('ticker-item');
      // Get the ticker symbol from the mapping, defaulting to the full name if not found
      const tickerSymbol = tickerMap[symbol] || symbol.toUpperCase();
      // Check if the symbol is one that needs custom decimal places
      let formattedPrice;
      if (symbol === 'shiba-inu' || symbol === 'pepe') {
        // Format price for custom decimal places
        formattedPrice = `$${price.usd.toFixed(6)}`;
      } else {
        // Default formatting for other tokens
        formattedPrice = `$${price.usd.toFixed(2)}`;
      }
      tickerItem.textContent = `${tickerSymbol}: ${formattedPrice}`;
      ticker.appendChild(tickerItem);
    });
  }
}
// Initialize ticker
createTickerItems();

.ticker-container {
    overflow:hidden;
    background-color:#111113;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    color:#fff;
    padding:6px;
    white-space:nowrap;
    display:flex;
}
.ticker {
    display:flex;
    animation:ticker 30s linear infinite;
    flex-wrap:nowrap;
}
.ticker-item {
  margin-right: 20px;
  background-color: #1a191f;
  border-radius: 12px;
  padding: 4px 12px;
  font-size:14px;
}
@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media(max-width:998px){
    .ticker{
        animation:ticker 20s linear infinite !important;
    }
    .ticker-item {
        margin-right:10px !important;
    }
}

<div class="ticker-container">
  <div class="ticker" id="ticker">
    <!-- Ticker items will be inserted here dynamically -->
  </div>
</div>

Answer 1

如果删除

display-flex

有效，您可以尝试此代码，其中使用

width: max-content;

来调整其内容的大小，以便能够显示所有内容。

const tickerMap = {
  'bitcoin': 'BTC',
  'ethereum': 'ETH',
  'binancecoin': 'BNB',
  'bitcoin-cash': 'BCH',
  'litecoin': 'LTC',
  'ripple': 'XRP',
  'chainlink': 'LINK',
  'matic-network': 'MATIC',
  'cardano': 'ADA',
  'dogecoin': 'DOGE',
  'shiba-inu': 'SHIB',
  'solana': 'SOL',
  'pepe': 'PEPE',
  'avalanche-2': 'AVAX',
  'polkadot': 'DOT'
};


function fetchCryptoPrices() {
  try {
    const responseData = '{"avalanche-2":{"usd":44.41},"binancecoin":{"usd":577.56},"bitcoin":{"usd":66572},"bitcoin-cash":{"usd":679.98},"cardano":{"usd":0.565032},"chainlink":{"usd":17.01},"dogecoin":{"usd":0.16979},"ethereum":{"usd":3239.5},"litecoin":{"usd":96.28},"matic-network":{"usd":0.867247},"pepe":{"usd":6.44e-06},"polkadot":{"usd":8.16},"ripple":{"usd":0.573485},"shiba-inu":{"usd":2.662e-05},"solana":{"usd":170.15}}'
    const data = JSON.parse(responseData);
    return data;
  } catch (error) {
    console.error('Error fetching cryptocurrency prices:', error);
    return null;
  }
}

function createTickerItems() {
  const ticker = document.getElementById('ticker');
  ticker.innerHTML = ''; // Clear previous ticker items
  const cryptoPrices = fetchCryptoPrices();
  if (cryptoPrices) {
    Object.entries(cryptoPrices).forEach(([symbol, price]) => {
      const tickerItem = document.createElement('div');
      tickerItem.classList.add('ticker-item');
      // Get the ticker symbol from the mapping, defaulting to the full name if not found
      const tickerSymbol = tickerMap[symbol] || symbol.toUpperCase();
      // Check if the symbol is one that needs custom decimal places
      let formattedPrice;
      if (symbol === 'shiba-inu' || symbol === 'pepe') {
        // Format price for custom decimal places
        formattedPrice = `$${price.usd.toFixed(6)}`;
      } else {
        // Default formatting for other tokens
        formattedPrice = `$${price.usd.toFixed(2)}`;
      }
      tickerItem.textContent = `${tickerSymbol}: ${formattedPrice}`;
      ticker.appendChild(tickerItem);
    });
  }
}
// Initialize ticker
createTickerItems();

.ticker-container {
  overflow: hidden;
  background-color: #111113;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  color: #fff;
  padding: 6px;
  white-space: nowrap;
}

.ticker {
  animation: marquee 20s linear infinite;
  width: max-content;
}

.ticker-item {
  margin-right: 20px;
  background-color: #1a191f;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 14px;
  display:inline-block;
}


.ticker-item:last-of-type{
background-color:blue;
}

.ticker-item:first-of-type{
background-color:red;
}


@keyframes marquee {
 0% { transform:  }
    100% {  }
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@media(max-width:998px) {
  .ticker {
    animation: marquee 20s linear infinite !important;
  }
  .ticker-item {
    margin-right: 10px !important;
  }
}

<div class="ticker-container">
  <div class="ticker" id="ticker">
    <!-- Ticker items will be inserted here dynamically -->
  </div>
</div>