如何使用css滚动页面或元素

How to scroll a page or a element using css

本文关键字：元素 滚动 何使用 css      更新时间：2023-09-26

我想知道是否有任何方法可以使用css属性滚动页面/元素。我们可以使用带有scrollTo和scrollBy的javascript来实现这一点，但我想使用css转换属性来滚动，以制作一个在给定时间戳后向左滚动的滑块。我试着使用jquery插件http://ricostacruz.com/jquery.transit/，但它不支持scrollLeft或任何滚动。

您可以在CSS中复制滚动，如下所示：

#parent{
    overflow: hidden;
}
#child{
    margin-left: -250px; /* Move across the page 250px (x axis) */
}

然而，这可能不是你想要的。

实现动画滚动的最佳和最常见的方法是使用jQueryJavascript库：

$("#parent").animate({
   scrollLeft: 250
}, 1000);

我找到的唯一解决方案是通过更改x进行转换，例如：

$('.box').transition({ x: '-40px' });

确保盒子的溢出没有被隐藏。http://ricostacruz.com/jquery.transit/

我从你的问题中得到的基本上是，你需要一个插件来按时间间隔从左向右滑动。在jquery中使用carousel插件，它将解决你的问题。

您可以根据自己的要求进行自定义。css也可以达到同样的效果，但在一定的时间间隔内，您必须触摸jquery。您没有提到您需要幻灯片加载或事件触发器。

相关文章：