Question

我在mvc视图中有这段代码，其中htmlcollection是许多表的集合，每个表包含4行。每张桌子的高度为40像素。

         var scrollWindow = $('<div>', {
                id: "scroll-window",
                html: htmlCollection
            });

        <style>
           #scroll-window {
           height: 655px;
           width: inherit;
           overflow-y: auto;
           }
          </style>

         $('#divCateringPX').append(scrollWindow);

我的视图中还有一个按钮，我想在divCateringPX中向下滚动40 px的倍数。这个问题看起来很简单，但我是jquery的新手并且卡住了。请帮助。

感谢。

Answer 1

你需要做的就是在按钮上添加一个click事件，它会回调一个在div中滚动的函数，如下所示：

var m=1,
    pos;

$("#button").click(function(){

    pos = $("#divCateringPX").scrollTop();

    $("#divCateringPX").animate({
        scrollTop: pos + 40*m
    }, 1500);

});

1500是以毫秒表示的动画持续时间。上面的代码将每次点击向下滚动40px。如果您想向下滚动等于40的倍数的像素，只需将m变量更改为您想要的倍数。

哦，顺便说一下，你应该将scrollTop属性设置为40px，而不是初始滚动位置加上 40px。如果你还没有这样做，它将只在第一次工作。之后，它会将scrollTop属性设置为每次40，这根本不做任何事情。我编辑了我的代码。

在div上自定义滚动

1 个答案: