缓慢自动将内容滚动到元素内部的右侧

Question

自动滚动元素内内容的最佳方法是什么。断续器.wrapper{ overflow-x: scroll;}断续器<div class="Wrapper"><table>...</table></div>断续器$('.Wrapper').scrollLeft($(this).height());我发现上面的代码工作得很好，但没有缓慢移动。需要一点解释，让它慢慢动画化。感谢您的任何帮助。

Answer 1

使用方法 animate 并将值设置为慢速，例如：

$('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

Answer 2

有趣的问题 - 在这里查看完整实施

如果要以连续方式（水平/垂直）自动滚动，则必须执行以下步骤 -

父元素 - 具有滚动属性 [即溢出-x] 子元素 - 大于父元素

创建一个动画函数，我们可以在给定的时间内滚动子元素 - 这需要三个参数 - 完成动画的时间 - 动画行为[线性/反弹等] - 一个将动画进度作为参数的函数，因此对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`

  }

});