Question

是否有任何插件可用于jquery为滚动设置动画？假设我在窗口中有几个滚动条。我希望每当用户滚动时，滚动条应该是动画而不是即时出现。

要准确了解我想要实现的目标，请参阅：

http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/

这是在Silverlight中。

了解它如何以流畅的方式滚动。我想实现相同的效果，但使用jquery。这可能吗？

感谢。

Answer 1

使用jQuery UI：http://jqueryui.com/demos/slider/#default。

将代码插入就绪处理程序，如下所示：

var width = $('#scrollable').width() - $('#wrapper').width();

$('#slider')
    .slider( { max: width })
    .bind('slide', function(event, ui) {

        $('#scrollable').stop().animate(
            {
                right: ui.value
            },
            1000
        );
    });

HTML：

<div id="wrapper">
    <div id="scrollable"><!-- bla bla --></div>
    <div id="slider"></div>
</div>

不要忘记隐藏滚动条：

#wrapper {
    text-align: left;
    width: 900px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}

Answer 2

这样的事情可能有所帮助。

$("html, body").animate({
            scrollTop: 0
        }, "slow");

Answer 3

您可以使用jQuery UI制作自己的自定义“滑块”，然后在更改时，执行“userD”建议的操作。一个滑块是水平的，一个是垂直的（当然）。

然后你想用css（“overflow：hidden;”）隐藏特定div的浏览器实际滚动条

这是@userD建议....

$（“html，body”）。animate（{ scrollTop：0 }，“慢”）;

您当然会将其更改为“#myDiv”而不是“html，body”。

Answer 4

一个不错的灯插件jQuery .scrollTo。在此处找到：Arial Fiesler Blog

sytanx很简单$('div').scrollTo(#anchorindiv,{duration:1000});

在滚动条中滚动动画

4 个答案: