GWT 禁用滚动面板的鼠标滚轮滚动

Question

我有两个滚动面板，尝试实现它们同时垂直滚动，代码如下

//leftSide and rightSide class has scrollPanel
final ScrollPanel scrollPanelLeft = leftSide.getScrollPanel();
final ScrollPanel scrollPanelRight = rightSide.getScrollPanel();

leftSide.removeMouseHandlers();
leftSide.removeScrollHandler();

HandlerRegistration mouseWheelScrollHandler =   
scrollPanelLeft.addDomHandler(new MouseWheelHandler() {
        @Override
        public void onMouseWheel(MouseWheelEvent event) {

            int currentVertPos =   
scrollPanelLeft.getVerticalScrollPosition();
            if (!lockSide)
                scrollPanelRight.setVerticalScrollPosition(currentVertPos);


        }
    }, MouseWheelEvent.getType());

    leftSide.addScrollHandler(mouseWheelScrollHandler);

 leftSide.addHandler(mouseWheelScrollHandler);

当在左侧滚动时，右侧移动到相同的垂直位置，但是，然后左侧再次移动（向下滚动），因此右侧似乎滞后并且不能同时移动。好像左边运行默认的鼠标滚轮滚动事件。如何禁用它或其他方式使它们同时垂直滚动？感谢帮助？

Answer 1

我想我已经重现了您的问题。当我在左侧面板上只有 ScrollHandler 时，右侧面板会平滑滚动。但是当我有 ScrollHandler左右面板的滚动都滞后。

我提出的解决方案是仅当鼠标位于左侧面板上时才滚动右侧面板（反之亦然）。通过这种方法，两个面板都可以平滑滚动。

这是一个完整的示例代码：

public class ScrollTest {

    private boolean mouseOverLeftPanel = false;
    private boolean mouseOverRightPanel = false;

    public ScrollTest() {
        final ScrollPanel scrollPanelLeft = new ScrollPanel();
        final ScrollPanel scrollPanelRight = new ScrollPanel();

        scrollPanelLeft.setPixelSize(100, 150);
        scrollPanelRight.setPixelSize(100, 150);

        VerticalPanel highContentLeft = new VerticalPanel();
        for(int i = 0; i < 20; i++)
            highContentLeft.add(new Label("Label " + Integer.toString(i)));

        VerticalPanel highContentRight = new VerticalPanel();
        for(int i = 0; i < 20; i++)
            highContentRight.add(new Label("Label " + Integer.toString(i)));

        scrollPanelLeft.add(highContentLeft);
        scrollPanelRight.add(highContentRight);

        // scroll handlers
        scrollPanelLeft.addScrollHandler(new ScrollHandler() {
            @Override
            public void onScroll(ScrollEvent event) {
                if(mouseOverLeftPanel)
                    scrollPanelRight.setVerticalScrollPosition(scrollPanelLeft.getVerticalScrollPosition());
            }
        });

        scrollPanelRight.addScrollHandler(new ScrollHandler() {
            @Override
            public void onScroll(ScrollEvent event) {
                if(mouseOverRightPanel)
                    scrollPanelLeft.setVerticalScrollPosition(scrollPanelRight.getVerticalScrollPosition());
            }
        });

        // mouse over handlers
        scrollPanelLeft.addDomHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
                mouseOverLeftPanel = true;
            }
        }, MouseOverEvent.getType());

        scrollPanelRight.addDomHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
                mouseOverRightPanel = true;
            }
        }, MouseOverEvent.getType());

        // mouse out handlers
        scrollPanelLeft.addDomHandler(new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
                mouseOverLeftPanel = false;
            }
        }, MouseOutEvent.getType());

        scrollPanelRight.addDomHandler(new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
                mouseOverRightPanel = false;
            }
        }, MouseOutEvent.getType());

        HorizontalPanel wrapper = new HorizontalPanel();
        wrapper.add(scrollPanelLeft);
        wrapper.add(scrollPanelRight);

        RootPanel.get().add(wrapper);
    }
}

GWT 禁用滚动面板的鼠标滚轮滚动

GWT Disable mouse wheel scrolling for Scroll Panel

gwt

vertical-scrolling