Management of scrolls in different areas of your page it’s as easy to attach a listener to the component where the scrolls are shown in order to change the positioning properties of the simulated scrollable attached area when the scrollbars are used. A couple of things to keep in mind are that the javascript-scrolled area should have the same dimensions that the main one in order to handle the same amount of displacement with the scrolls, and depending on the need of explicitly\u00a0 showing the secondary scrollbar or not CSS display property should be set properly.<\/p>\n
A very basic example would be just moving this examples here, a couple of simple HTML boxes:<\/p>\n
\n\nLorem ipsum...<\/div>\n<\/div>\n\nLorem ipsum...<\/div>\n<\/div>\n<\/pre>\nwith its asociatted CSS properties:<\/p>\n
\n#scrolled-block {\n overflow:auto;\n}\n#javascript-scrolled-block {\n overflow:hidden;\n}\n.content-box {\n background-color: #EEEEEE;\n margin:20px;\n padding:10px;\n width: 200px;\n height: 200px;\n float:left;\n}\n<\/pre>\nThis produces the displayed result. Our purpose is to add an action listener to onScroll first component in order to get the second box moved when we scroll the first one:<\/p>\n
\n\nScrollable box<\/h2>\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\nNunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
\nin eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
\nsenectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
\nlaoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.<\/p><\/div>\n<\/div>\n\n\nSelf-scrolled box<\/h2>\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\nNunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
\nin eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
\nsenectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
\nlaoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.<\/p><\/div>\n<\/div>\nlistenToScroll();
\nfunction listenToScroll() {
\nscroll.block_ = document.getElementById(‘scrolled-block’);
\nscroll.jsblock_ = document.getElementById(‘javascript-scrolled-block’);
\n onScroll = function() {
\n scroll.jsblock_.scrollTop = scroll.block_.scrollTop;
\n };
\n scroll.block_.onscroll = onScroll;
\n}<\/p>\n\nlistenToScroll();\n\nfunction listenToScroll() {\n scroll.block_ = document.getElementById('scrolled-block');\n scroll.jsblock_ = document.getElementById('javascript-scrolled-block');\n onScroll = function() {\n scroll.jsblock_.scrollTop = scroll.block_.scrollTop; \n };\n scroll.block_.onscroll = onScroll;\n}\n<\/pre>\nThis strategy works fine for simultaneous synchronization but we have checked a different behavior for listeners attached to scrollbars in the different browser engines. In WebKIT<\/a> based browsers with its Javascript engines (as Squirrelfish in Epiphany or v8 in Chrome), all listeners are processed when the browser implementation fiscally scrolls the component, so the movement is perfectly synchronized. For Gecko plus Tracemonkey, the effect that can be perceived is that scroll in the first component is slightly delayed. To avoid this, it’s necessary to scroll both components using Javascript, and creating a third element just with the scrollbar. The result can be checked evolving the previous example.<\/p>\n
\n\nSelf-scrolled box 1<\/h2>\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\nNunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
\nin eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
\nsenectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
\nlaoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
\nAliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci. <\/p><\/div>\n<\/div>\n\n\nSelf-scrolled box 2<\/h2>\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\nNunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
\nin eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
\nsenectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
\nlaoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
\nAliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci. <\/p><\/div>\n<\/div>\n\n\n<\/div>\n<\/div>\nlistenToSimulatedScroll();
\nfunction listenToSimulatedScroll() {
\n\tscroll.simulatedblock_ = document.getElementById(‘simulated-scrolled-block’);
\n\tscroll.jsblock1_ = document.getElementById(‘javascript-scrolled-block-1’);
\n\tscroll.jsblock2_ = document.getElementById(‘javascript-scrolled-block-2’);
\n onScroll = function() {
\n scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop;
\n scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop;
\n };
\n scroll.simulatedblock_.onscroll = onScroll;
\n}<\/p>\n\nlistenToSimulatedScroll();\nfunction listenToSimulatedScroll() {\n\tscroll.simulatedblock_ = document.getElementById('simulated-scrolled-block'); \n\tscroll.jsblock1_ = document.getElementById('javascript-scrolled-block-1');\t\n\tscroll.jsblock2_ = document.getElementById('javascript-scrolled-block-2');\t\n onScroll = function() {\n scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop; \n scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop; \n };\n scroll.simulatedblock_.onscroll = onScroll;\n}\n<\/pre>\nIt would be necessary to remove the paddings, and that’s it.<\/p>\n
\n#javascript-scrolled-block-1, #javascript-scrolled-block-2 { \n\toverflow:hidden;\n}\n#simulated-scrolled-block {\n overflow:auto;\n background-color: #EEEEEE;\n padding-left:0;\n width: 5px;\n}\n.inner-simulated-block {\n height:300px;\n}\n.content-box {\n background-color: #EEEEEE;\n overflow:auto;\n padding-left:0;\n width: 5px;\t\n margin:20px;\n padding:10px;\n height: 200px;\n float:left;\n}\n<\/pre>\n\n\nLorem ipsum...<\/div>\n<\/div>\n\nLorem ipsum...<\/div>\n<\/div>\n\n\n<\/div>\n<\/pre>\nThings get really complicated when it’s necessary to scroll intersected areas inside a complex layout with the need to stick scrollable components over the main area, in a desktop application style approach, let’s say for instance a Gantt application layout. In this scenario we have to combine this technique with CSS positioning of related elements, manage its resizing and binding different methods to each dimension scrolling, but the main idea is the same one.<\/p>\n","protected":false},"excerpt":{"rendered":"
Management of scrolls in different areas of your page it’s as easy to attach a listener to the component where the scrolls are shown in order to change the positioning properties of the simulated scrollable attached area when the scrollbars … Continue reading