Question

在我的应用程序（Vaadin 7.6.1。）中，我想使用平滑滚动来锚定。是否可以使用Javascript为此滚动设置动画？

你能指出我正确的方向吗？

我试过这个，但它不起作用：

DemoUI.java

@Theme("demo")
@JavaScript({"example.js"})
public class DemoUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
    final VerticalLayout vLayout = new VerticalLayout();
    vLayout.setMargin(true);
    setContent(vLayout);
    Button button = new Button("Click Me");
    button.addClickListener(e ->
        Page.getCurrent().getJavaScript().execute(
            "smoothScroll(document.getElementById('anchor'), 2000)");
    );
    vLayout.addComponent(button);
    }

    ...

    VerticalLayout aaa = new VerticalLayout();
    aaa.setId("anchor");
    vLayout.addComponent(aaa);

    ...

}

example.js

function smoothScroll(target, time) {
    // time when scroll starts
    var start = new Date().getTime(),

        // set an interval to update scrollTop attribute every 25 ms
        timer = setInterval(function() {

            // calculate the step, i.e the degree of completion of the smooth scroll
            var step = Math.min(1, (new Date().getTime() - start) / time);

            // calculate the scroll distance and update the scrollTop
            document.body['scrollTop'] = (step * target.offsetTop);

            // end interval if the scroll is completed
            if (step == 1) clearInterval(timer);
        }, 25);
}

Answer 1

在github上有一个完整的动画滚动实现

https://github.com/zero11it/vaadin-animatedscrollintoview

我也会检查

https://vaadin.com/api/7.6.0/com/vaadin/server/Scrollable.html#setScrollTop(int)

它在客户端如何工作，因为默认的vaadin滚动到组件没有动画。

Answer 2

这有效：

DemoUI.java
@Theme("demo")
@JavaScript({"example.js"})
public class DemoUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
    final Panel panel = new Panel();
    panel.setId("panelScroll");
    setContent(vLayout);

    final VerticalLayout vLayout = new VerticalLayout();
    vLayout.setMargin(true);
    panel.setContent(vLayout);

    Button button = new Button("Click Me");
    button.addClickListener(e ->
        Page.getCurrent().getJavaScript().execute(
        "smoothScroll('panelScroll', 'anchor')");
    );
    vLayout.addComponent(button);
    }

    ...

    VerticalLayout aaa = new VerticalLayout();
    aaa.setId("anchor");
    vLayout.addComponent(aaa);

    ...

}

example.js

function smoothScroll(panelID, targetID) {

    var time = 800
    var panel = document.getElementById(panelID)
    var target = document.getElementById(targetID)

    var panelChildren = panel.childNodes;
    var panelSub = panelChildren[1];
    var startScroll = panelSub.scrollTop;

    // time when scroll starts
    var start = new Date().getTime(),

    // set an interval to update scrollTop attribute every 25 ms
    timer = setInterval(function() {
        // calculate the step, i.e the degree of completion of the smooth scroll
        var step = Math.min(1, (new Date().getTime() - start) / time);

        panelSub.scrollTop = startScroll + (step * target.offsetTop);
        // document.body['scrollTop'] = (step * target.offsetTop);

        // end interval if the scroll is completed
        if (panelSub.scrollTop > target.offsetTop) {
            panelSub.scrollTop = target.offsetTop
            clearInterval(timer);
        }
    }, 25);
}

Vaadin 7.6.1。 +平滑滚动

2 个答案: