Как анимировать прокрутку вправо автоматически, как новостную ленту? - PullRequest
Новая
       56

Как анимировать прокрутку вправо автоматически, как новостную ленту?

0 голосов
/ 03 мая 2020

Я ищу способ, которым тело могло бы прокручивать прокрутку прямо как новостная лента. Для меня единственный способ прокрутки - это иметь body с overflow-x:auto и overflow-y:auto. Ширина тела задана настолько высокой, что в основном это бесконечность width.jq

Это то, что я сделал до сих пор: 

body {overflow-x:auto;overflow-y:auto;height:10px;width:500000px}
<body>
<div class="test">Lorem Khaled Ipsum is a major key to success. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. I’m up to something. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. They key is to have every key, the key to open every door. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. Bless up. They don’t want us to eat. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! The key to success is to keep your head above the water, never give up. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. They will try to close the door on you, just open it. To succeed you must believe. When you believe, you will succeed. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.
  </div>
</body>

1 Ответ

2 голосов
/ 03 мая 2020

Это довольно просто. Сделайте относительный div с абсолютом в нем. Переполните х наружное и поместите внутреннее. 

const content = document.getElementById('content');
let pos = 400;
const scroller = function() {
  pos--;
  content.style.left = pos + 'px';
  window.requestAnimationFrame(scroller);
}

scroller();
.scroller {
  width: 400px;
  height: 20px;
  position: relative;
  overflow-x: hidden;
}

#content {
  width: 1000em;
  position: absolute;
  white-space: no-wrap;
  left: 400px;
}
<body>
  <div class="scroller">
    <div id="content">Lorem Khaled Ipsum is a major key to success. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt
      water is the healing. I’m up to something. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. They key is to have every key, the key to open every door. Surround yourself with angels, positive
      energy, beautiful people, beautiful souls, clean heart, angel. Bless up. They don’t want us to eat. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! The key to success is to keep your head
      above the water, never give up. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. They will try to close the door on you, just open it. To succeed you must believe. When you believe, you will succeed.
      You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.
    </div>
  </div>
</body>
...