Is it possible to get content of div only if first 100px

Question

Is it possible to get the content of div that is placed in the first 100px of the div.

Ex.

 __________________________
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       | 500px
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
|_________________________|

So if i want to get just the content that is placed in the first 250px it will give me only five rows (since in 500px are ten).

Can I handle this with javascript or jQuery (if so, how should I manage it?), or should I use any plugin that manages this (if so , which one?).

Answer 1

I'm not aware of any method to do what you are asking of accurately. However, by simple logic, we can maybe arrive at an approximation. The reasoning is as follows:

1. Find out the divHeight
2. Find out the fraction 100px is of divHeight
3. Get all the text in the div. Get the fraction length of that text.

Sample:

 var div = document.getElementById('test'); var divHeight = div.getBoundingClientRect().height; var fraction = 100/divHeight; fraction = fraction > 1 ? 1 : fraction; var text = div.innerText; var truncated = text.substring(0, Math.floor(fraction * text.length)); console.log(truncated); 

 #test{ border: 1px solid black; width: 100px; position: relative; } div#overlay{ width: 100px; position: absolute; top:0; left:0; height: 100px; background: rgba(0,0,0,0.3); } 

 <div id="test"> Lorem ipsum dolor amet street art listicle copper mug meditation roof party bicycle rights kickstarter meggings lomo. Cardigan hell of lumbersexual live-edge organic edison bulb, tattooed tumeric gluten-free. Af normcore disrupt fanny pack, venmo brooklyn helvetica squid blue bottle ugh stumptown taxidermy authentic copper mug. Authentic tacos humblebrag lyft vexillologist lo-fi poke paleo 8-bit pabst selvage crucifix. Chartreuse pitchfork portland hammock literally actually neutra la croix hell of migas meditation you probably haven't heard of them. <div id="overlay"></div> </div> 

Disadvantages:

1. If the text does not occupy the full height of the div, this will fail.
2. It won't handle breaks and differently spaced fonts perfectly
3. It won't handle cases where the 100px mark is in the middle of a line very well

Note:

Perhaps a more robust way of handling this is by using Binary Search recursively until the string length is observed to occupy 100px height. I have seen this being done in the shaveJS library.

As an after thought, you could use the ShaveJS library itself to get the text truncated to 100px. Sample:

 var div = document.getElementById('test'); var divHeight = div.getBoundingClientRect().height; // Let Shave do it's truncation magic shave('#test', 100); // Get the truncated value var truncated = div.innerText; // Reset the div to it's original height; shave('#test', divHeight); console.log(truncated); 

 #test{ border: 1px solid black; width: 100px; position: relative; } body{ position: relative; } div#overlay{ width: 100px; position: absolute; top:0; left:0; height: 100px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/shave/2.1.3/shave.min.js"></script> <div id="test"> Lorem ipsum dolor amet street art listicle copper mug meditation roof party bicycle rights kickstarter meggings lomo. Cardigan hell of lumbersexual live-edge organic edison bulb, tattooed tumeric gluten-free. Af normcore disrupt fanny pack, venmo brooklyn helvetica squid blue bottle ugh stumptown taxidermy authentic copper mug. Authentic tacos humblebrag lyft vexillologist lo-fi poke paleo 8-bit pabst selvage crucifix. Chartreuse pitchfork portland hammock literally actually neutra la croix hell of migas meditation you probably haven't heard of them. </div> <div id="overlay"></div> 

Answer 2

You don't simply mean:

div {
 height:250px;
 overflow:hidden;
}

Or, if you need it to be calculated, set a style attribute with the desired height?

Answer 3

I believe the following CSS will solve your issue. replace myClass with the name of the parent container.

.myClass{
    overflow: scroll;
    height: 250px;
}