Question

我有两个scrollpanel，尝试实现它们同时垂直滚动，这里是代码

//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禁用滚动面板的鼠标滚轮滚动

1 个答案: