Медленная автоматическая прокрутка содержимого прямо внутри элемента

Question

Как лучше всего использовать автоматическую прокрутку содержимого внутри элемента?

CSS

.wrapper{
 overflow-x: scroll;
}

HTML

<div class="Wrapper">
<table>
...
</table>
</div>

JS

$('.Wrapper').scrollLeft($(this).height());

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

Спасибо за любую помощь.

Answer 1

Интересный вопрос - Оформление заказа Полная реализация здесь

Если вы хотите автоматически c прокручивать непрерывно (по горизонтали / вертикали), вам необходимо выполнить следующие шаги -

Родительский элемент - со свойством прокрутки [т.е. overflow-x] Дочерний элемент - больше, чем родительский

Создайте функцию анимации, с помощью которой мы можем прокручивать дочерний элемент за заданное время - для чего требуются три параметра - время для завершения анимации - поведение анимации [linear / Bounce и т. д.] - функция, которая принимает ход анимации как параметр и, следовательно, некоторые изменения в DOM

const content = document.getElementsByClassName("content")[0];
const innerContent = document.getElementsByClassName("inner-content")[0];
const innerContentWidth = innerContent.getBoundingClientRect().width;
const contentWidth = content.getBoundingClientRect().width;

function animate({ timing, draw, duration }) {
  let start = performance.now();

  requestAnimationFrame(function animate(time) {
// timeFraction goes from 0 to 1

let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;

// calculate the current animation state
let progress = timing(timeFraction);

draw(progress); // draw it

if (timeFraction < 1) {
  requestAnimationFrame(animate);
}
  });
}

animate({
  duration: 40000, // specify the time of scrolling in ms
  timing(timeFraction) {
    return timeFraction;
  },
  draw(progress) {
    const percent = progress * 100;
    content.scrollTo(percent * ((innerContentWidth - contentWidth) / 100), 0);
    console.log(percent);

    // couple of other ways you can implement the same using other css props
    // innerContent.style.transform = `translateX(-${percent * 20}px)`;
    // innerContent.style.left = `-${percent * ((innerContentWidth - contentWidth) / 100)}px`
  }
});

Подробнее о

• методы прокрутки окна

• JavaScript Анимация и запросAnimationFrame

Answer 2

Используйте метод animate и установите значение slow, например:

$('button').on('click', event => {
  $('#mycontent').animate({
    scrollTop: $('#mycontent').scrollTop() + (($('#mycontent').scrollTop() >= 229) ? (-229) : (100))
  }, 'slow')
})

#mycontent {
  overflow: scroll;
  height: 400px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Scroll</button>
<div id="mycontent">
  JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[8] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior,[9] and all major web browsers have a dedicated JavaScript engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). However, the language itself does not include any input/output (I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides those APIs.

JavaScript engines were originally used only in web browsers, but they are now embedded in some servers, usually via Node.js. They are also embedded in a variety of applications created with frameworks such as Electron and Cordova.
</div>

Примечание: В моем примере я использовал scrollTop, чтобы просто изменить на scrollLeft