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

Question

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

Answer 1

您可以像这样在 CSS 中复制滚动：

#parent{
    overflow: hidden;
}

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

但是，这可能不是您想要的。

实现动画滚动的最好和最常见的方法是使用 jQuery Javascript 库：

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

Answer 2

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

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

确保没有隐藏框溢出。 http://ricostacruz.com/jquery.transit/

Answer 3

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

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