get child div from parent using jquery

Question

Hello guys I have a parent div and multiple child div. and I have a scroll which can be moved up and down to view the child. Now I want to know that is there a way that when I scroll down or up then using jquery I would see which child div is in focus. Is there any way to do that. If yes please tell. Thanks

Here is a example

<div id="parent" style="overflow:scroll; height:200px">
   <div id="child1">
      <p>
     some text
     </p>
    </div>

   <div id="child2">
      <p>
     some text
     </p>
   </div>

   <div id="child3">
      <p>
     some text
     </p>
   </div>
</div>

Now this becomes like this image. Now as I scroll down then how can I know which child div which is in focus. Every time the user moves the scroll how will I know which div is in focus.

$( '#parent' ).scroll(function() {
  //What shoult I write here to know which child div is in focus 
});

Do you really mean "in focus", or currently visible? Not the same thing. The element that has "focus" is the one that will receive keyboard events. And what if it is scrolled so that the bottom half of one and top half of the next are both visible? — nnnnnn, Mar 22 '16 at 03:33
@NewToJS I tried to use the .focus function but that doesn't works for em — garden, Mar 22 '16 at 03:37
@NewToJS I have even tried the .scroll but I can't understand how will I get know which div is in focus — garden, Mar 22 '16 at 03:40
@garden you don't have any attempts shown in your question. I suggest you display what you have tried and try explain why you think it isn't working as intended. — NewToJS, Mar 22 '16 at 03:41
I think you are looking for this. http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport — Ujwal Ratra, Mar 22 '16 at 03:48

score 0 · Answer 1 · answered Mar 22 '16 at 03:42

0

I have used a plugin called Jquery Visible in the past to achieve this. I can't describe exactly what's going on in the background of it, but you can set up a call to check if your element is within the viewport:

$('#element').visible()

I'd like to note that I haven't used the plugin in at least 12 months, so support may have ended. https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

answered Mar 22 '16 at 03:42

Aaron Lavers

967
9
31

isn't there any other you might know because I have alot of child divs. Now if I started writing it would be alot of code – garden Mar 22 '16 at 03:43
1

@garden Assign a `class` name rather than `ID`'s. – NewToJS Mar 22 '16 at 03:46
Using this plugin you will be able to chain classes together to get specific children, or if you're looking for your last item in the list it could be something like: $('#parent div:last-child') – Aaron Lavers Mar 22 '16 at 03:51
and via this can I get some attribute of the current child div which is in focus – garden Mar 22 '16 at 06:17

score 0 · Answer 2 · edited May 23 '17 at 10:30

I do not think there is any easy way to do this. I did however find this useful function on a similar post:

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

it basically checks the element off against the top of the window.

To add in your example:

$( '#parent' ).scroll(function() {
            $(this).children().each(function(child) {
                if(isScrolledIntoView(child)) {
                    //Do the thing
                }
            });
        });

See the post here: Check if element is visible after scrolling

get child div from parent using jquery

2 Answers2