Creating a nested wireless routing
source link: https://www.codesd.com/item/creating-a-nested-wireless-routing.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Creating a nested wireless routing
I am attempting to create a series of window sized divs with inner divs of variable sizes > window size. The catch is it needs to scroll as if the divs where not nested.
In short I want THIS:
css{
block{ height:100wh; }
innerBlockSmall{ height:100wh; }
innerBlockLarge{ height:200wh; }
}
<div class="block">
<div class="innerBlockLarge"></div>
</div>
<div class="block">
<div class="innerBlockSmall"></div>
</div>
https://jsfiddle.net/cbuh8psd/
to act just like THIS
css{
innerBlockSmall{ height:100wh; }
innerBlockLarge{ height:200wh; }
}
<div class="innerBlockLarge"></div>
<div class="innerBlockSmall"></div>
https://jsfiddle.net/t6zrvo7u/1/
Unfortunately scroll "Focus" is triggered by hover
ing over the scrollable element. In this case it is an undesirable behavior.
There are 2 possible solutions that I am currently aware of.
Manually Assigning scroll "Focus" via javascript. (Optimal)
Completely overwriting default HTML scrolling javascript, for example the library ISCROLL5.
(ok, if the performance hit is small)
Unfortunately after looking through developer.mozilla's HTML5 documentation I have not run across any way to "Focus" scrolling to an element via javascript.
As for option 2 : ISCROLL5 has had an undesirable performance hit with over ~15-20 scrolling divs.
I am hoping I am missing something here, any solutions, fixes, or advice would be much appreciated.
I have no idea why you would wish to do this, but the only way I can think of achieving the effect you want is along the lines of recreating the scrollbar, the good news however is that this needs not come at the cost of losing your native like experience.
Sadly I can't remember the project I wrote this code for, though one way to achieve this is to make yourself a scrollbar component. This scrollbar component would indeed provide a fake scrollbar, but provide a native like interface. So, how do you do this?
- You determine the width of the scrollbar by taking the difference between an element with and without
overflow: scroll
. Let this bescrollWidth
- You create a
<div>
withoverflow: auto
of widthscrollWidth
andposition: fixed
this in place on the right side of the body. Let thescrollTop
property bescrollPosition
. - Inside the element you add another
<div>
with width0
(this at least works in Chrome, check whether other browsers treat this differently) and let height bedocumentLength
. - Now, you can fully control the scrollbar by setting
documentLength
andscrollPosition
any way you wish to. In your case you would setdocumentLength
as the combined scrollHeights of each element andscrollPosition
based on the relativescrollTop
's in those nodes.
A very basic demonstration of the concept (not the implementation) can be found in this jsfiddle (note the width
of the scrollbar is fixed to 20px
in this case and there is no dynamic code whatsoever).
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK