Vaadin 7.6.1。 +平滑滾動

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); 
}