Scrolling blocked when placing an element over

[Harsh Chaturvedi]

Hi,

I was working with suggestions in  https://groups.google.com/g/blockly/c/NCukwTKMR0U

and added a transparent div element on top of the workspace.

However, the scroll is not working (mouse wheel scroll, the scrolling through scroll bar still works). Here is the relevant code - 

Html - 

<div id="blocklyDiv-readOnly" style="height: 100%; width: 100%;"></div>

JS - 

blocklyReadOnlyWorkspace = Blockly.inject(blocklyDivId + "-readOnly", {
            toolbox: blocklyNamespace.Constants.EmptyToolbox,
            scrollbars: true,
            move: {
                scrollbars: {
                    horizontal: true,
                    vertical: true
                },
                drag: true,
                wheel: true
            },
            //initialising the theme to customise the block colours and block styles
            theme: Blockly.Themes.Majestic
        });

CSS - 

#blocklyDiv-readOnly:before {
            content: '';
            height: 98%;
            width: 98%;
            display: block;
            position: absolute;
            background-color: transparent;
            z-index: 99;
        }

Any help to make the scrolling functional would be appreciated.

Regards,

Harsh

[Beka Westberg]

Hello Harsh =)

I'm not sure of a way you can get the scrolling/zooming working with this solution :/ I believe the problem is that your overlay div is capturing all of the mouse events, so they never reach Blockly.

An alternative solution to using the overlay div is to reinject the workspace whenever you want to switch between read and readonly modes.

For example:

```

var state = Blockly.serialization.workspaces.save(myWorkspace); // save the state of the editable workspace

myWorkspace.dispose(); // dispose of the editable workspace

myWorkspace = Blockly.inject('blocklyDiv', {readonly: true}); // reinject a readonly workspace

Blockly.serialization.workspaces.load(state, myWorkspace);  // load the state back into the readonly workspace

```

Note that this strategy may cause you problems if you are using the XML serialization system. But it works perfectly fine if you are using JSON =)

I hope that helps! If you have any further questions please reply =)

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/174cd108-2739-46df-bbcf-e5abc47cec72n%40googlegroups.com.