Автоматически анимировать/прокручивать Div по горизонтали при загрузке страницы

У меня есть, казалось бы, основной вопрос, который я не могу найти в том, чего я пытаюсь достичь. Я новичок в JavaScript и довольно посредственно в CSS.

Я пытаюсь добиться этого. Страница, которую можно отобразить на экране телевизора, показывающая список спортивных результатов, переходящий вправо. Я хочу, чтобы страница автоматически прокручивала этот div вправо (у которого динамическая длина зависит от количества контента), чтобы она могла видеть все оценки во всех разделах и автоматически прокручивать контент вправо. Когда он достигнет конца, сделайте паузу, а затем обновите (используя Ajax), вернувшись к началу.

Я уверен, что если меня укажут в направлении правильных функций для использования, я смогу соединить различные части вместе.

Вот пример того, что я пытаюсь запустить при загрузке страницы, которую я хотел бы плавно прокручивать до конца в течение 10 секунд, я просто не могу понять, как определить/установить «конец» div .

$('#ScrollMe').animate({
    scrollX: ??? //To div end;
    }, 10000);

Думаю, если я смогу решить эту часть, я смогу решить и все остальное.

Любые указатели? Javascript, CSS... открыты для всего!

Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
1
0
27
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вам просто нужно применить свойство overflow: scroll css к div, который вы хотите «переполнить» по ширине страницы. Таким образом, он добавит полосу под div, например полосу прокрутки по умолчанию в каждом браузере.

parentDivWithContentToOverflow{
  Overflow: scroll;
}

Ответ принят как подходящий

Вы можете использовать свойство .scrollWidth, чтобы определить, как далеко прокручивать, вычитание видимой ширины даст более точную конечную точку, например:

(стили и время анимации установлены на 2 секунды, просто чтобы продемонстрировать, что происходит)

$("#scrollMe").animate({
  scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px"
}, 2000);
#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
  <div id=inner>
  </div>
</div>

Именно то поведение, которое я искал - спасибо!

Matthew Warr 06.04.2022 21:33

Это отличный пример того, что вам нужно.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Но для этого вам нужно указать div.

Если вам нужно только прокрутить страницу до конца (что правильно), вы можете использовать свой пример. Но вам нужно указать местоположение пикселя для прокрутки вправо. Для этого вам может понадобиться что-то вроде приведенного ниже.

function getWidth(){
    return Math.max(document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth);
}

Приведенный выше фрагмент кода был украден из этого ответа ? https://stackoverflow.com/a/59520378/4972683

Другие вопросы по теме