I have three canvasses on my web page as illustrated here:
https://www.dropbox....um/ccs.png?dl=0I've been trying to control how they are positioned and scrolled.Grey Canvas:Is locked to the top of the web page and only scrolls horizontally.Brown Canvas:Is locked to the left side of the web page and only scrolls verticallyBlue Canvas:Is free to scroll horizontally and vertically.As the blue canvas scrolls vertically so does the Brown Canvas.As the blue canvas scrolls horizontally so does the Grey Canvas.The z-index is shown so as to illustrate how objects are stacked.
<html> <head> <style type='text/css'> canvas.headerCanvas { position:fixed; top:0; left:0; height:50px; width:1000px; background-color:grey; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:2; } canvas.leftCanvas { position:fixed; top:0; left:0; height:950px; width:50px; background-color:yellow; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:1; } canvas.bodyCanvas { position:fixed; top:0; left:0; display:block; height:1000px; width:1000px; background-color:blue; /* just for testing, delete later */ border:3px red solid; /* just for testing, delete later */ z-index:0; } </style> </head> <body> <canvas id='CanvasH' class='headerCanvas'></canvas> <canvas id='CanvasL' class='leftCanvas'></canvas> <canvas id='CanvasB' class='bodyCanvas'></canvas> </body></html>
What I'm trying to figure out is how to trap the scroll event for the main canvas, then I can position the others manually... I think.
It has been suggested that a flexbox might be a more appropriate object than a canvas but I don't know much about them.
Any help is appreciated.
TIAB.