BJOBrien Posted May 23, 2015 Share Posted May 23, 2015 (edited) 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. Edited May 23, 2015 by BJOBrien Link to comment Share on other sites More sharing options...
justsomeguy Posted May 26, 2015 Share Posted May 26, 2015 I suppose the most obvious solution would be the onscroll event, have you looked into that? Link to comment Share on other sites More sharing options...
BJOBrien Posted June 4, 2015 Author Share Posted June 4, 2015 For sure... do all elements get the event and process them? Or is there only one event handler? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 4, 2015 Share Posted June 4, 2015 Some events can bubble up through the DOM tree, like for a click event. A click event would fire on the element you click on and then every parent element, that is bubbling. The opposite of that is event capturing. I don't think that would apply to a scroll event though, because the event would only apply to the one element being scrolled. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now