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

时间:2013-07-24 12:08:55

标签: javascript jquery css3 css-transitions

我想知道是否有任何方法可以使用任何css属性滚动页面/元素。我们可以使用带有scrollTo和scrollBy的javascript来完成它,但是我想使用css过渡属性滚动来创建一个在给定时间戳后滚动的滑块。我尝试使用jquery插件http://ricostacruz.com/jquery.transit/,但它不支持scrollLeft或任何滚动。

3 个答案:

答案 0 :(得分:1)

您可以像这样复制CSS中的滚动:

#parent{
    overflow: hidden;
}

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

但是,这可能不是你想要的。

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

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

答案 1 :(得分:0)

我找到的唯一解决方案是通过改变x进行转换, 例如:

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

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

答案 2 :(得分:-1)

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

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