As with jquery, get a list of elements that are outside the scope of a parent element that has the overflow: hidden style set

Here is the HTML:

<div class="item-footer"> <div class="footer-btn"><span>Забрать</span></div> <div class="footer-btn"><span>Оплатить</span></div> <div class="footer-btn"><span>Счет</span></div> <div class="footer-btn"><span>Добавлено</span></div> <div class="footer-btn"><span>Добавить</span></div> <div class="footer-btn"><span>Подтвердить</span></div> <div class="footer-btn"><span>Отмена</span></div> <div class="footer-btn"><span>Разделить</span></div> <div class="footer-btn"><span>Объединить</span></div> <div class="footer-btn"><span>Вернуть</span></div> </div>

enter image description here

  • it's easy and simple, if they are in your HTML, if they are not there, it is difficult and very difficult :) Show your HTML and you will be told how to do it - MasterAlex
  • @MasterAlex, added html - Dmitry Vishnyakov

2 answers 2

Here I have this option:

 $(document).ready(function() { var footerItems = $('.item-footer').children('.footer-btn'), itemsLength = 0, lostItems = []; footerItems.each(function() { itemsLength = itemsLength + $(this).outerWidth(); if (itemsLength > $('.item-footer').outerWidth()) { lostItems.push($(this).children('span').text()); }; }); console.log(lostItems); }); 
 .item-footer { overflow: hidden; width: 400px; height: 30px; } .item-footer div { float: left; height: 30px; padding-left: 5px; padding-right: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item-footer"> <div class="footer-btn"><span>Забрать</span></div> <div class="footer-btn"><span>Оплатить</span></div> <div class="footer-btn"><span>Счет</span></div> <div class="footer-btn"><span>Добавлено</span></div> <div class="footer-btn"><span>Добавить</span></div> <div class="footer-btn"><span>Подтвердить</span></div> <div class="footer-btn"><span>Отмена</span></div> <div class="footer-btn"><span>Разделить</span></div> <div class="footer-btn"><span>Объединить</span></div> <div class="footer-btn"><span>Вернуть</span></div> </div> 

     $(function() { var list = []; $('.block').each(function() { var pos = [ { left: $(this).offset().left, right: $(this).offset().left + $(this).outerWidth(), top: $(this).offset().top, bottom: $(this).offset().top + $(this).outerHeight() }, { left: $('.list').offset().left, right: $('.list').offset().left + $('.list').outerWidth(), top: $('.list').offset().top, bottom: $('.list').offset().top + $('.list').outerHeight() } ]; if(pos[0].right > pos[1].right || pos[0].left < pos[1].left || pos[0].top < pos[1].top || pos[0].bottom > pos[1].bottom){ list[list.length] = $(this).attr('name'); }; }); console.log(list); }); 
     .list { width: 250px; height: 200px; border: 1px solid black; overflow: hidden; } .list .list2 {width: 600px;} .list .list2 .block {display: inline-block;width:70px;height:70px;margin:3px;background-color:red;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="list2"> <div class="block" name="1"></div> <div class="block" name="2"></div> <div class="block" name="3"></div> <div class="block" name="4"></div> <div class="block" name="5"></div> <div> </div>

    • Gee, thanks :) I got about it too, I thought that it could be easier to implement. If you do not prompt a simpler solution, then your option is the best. Thank. - Dmitry Vishnyakov
    • @DmitryVishnyakov, I don’t know how much easier, but I know how harder it is to organize: D - Yuri
    • My first script for 50 lines came out, after that I thought that I needed to change something :))))) The second script for 30 lines :) - Dmitry Vishnyakov
    • @DmitryVishnyakov, there was more) - Yuri