There is a container that contains a group of elements, an example in the snippet.

It has a certain width that can vary and contains an overflow: hidden style, i.e. part of the elements is not visible.

 .list { overflow: hidden; white-space: nowrap; width: 200px; } .list li { display: inline-block; } 
 <ul class="list"> <li>text 1</li> <li>text 2</li> <li>text 3</li> <li>text 4</li> <li>text 5</li> <li>text 6</li> </ul>

Using JavaScript or jQuery, you need to select only those li that are visible within the 200px width; but it is necessary to take into account the moment that this width can be different and can vary.

    2 answers 2

    There is no easy way. At least I did not find.
    It is possible so:

     document.addEventListener('DOMContentLoaded', e => { document.querySelector('#show').addEventListener('click', e => { let li = Array.from(document.querySelectorAll('.list li')).filter(e => e.isVisible(e)); document.querySelector('#result').innerHTML = li.map(e => e.textContent).join('<br />'); }); }); // From https://gist.github.com/jasonfarrell/3659166 /** * Author: Jason Farrell * Author URI: http://useallfive.com/ * * Description: Checks if a DOM element is truly visible. * Package URL: https://github.com/UseAllFive/true-visibility */ Element.prototype.isVisible = function() { 'use strict'; /** * Checks if a DOM element is visible. Takes into * consideration its parents and overflow. * * @param (el) the DOM element to check if is visible * * These params are optional that are sent in recursively, * you typically won't use these: * * @param (t) Top corner position number * @param (r) Right corner position number * @param (b) Bottom corner position number * @param (l) Left corner position number * @param (w) Element width number * @param (h) Element height number */ function _isVisible(el, t, r, b, l, w, h) { var p = el.parentNode, VISIBLE_PADDING = 2; if (!_elementInDocument(el)) { return false; } //-- Return true for document node if (9 === p.nodeType) { return true; } //-- Return false if our element is invisible if ( '0' === _getStyle(el, 'opacity') || 'none' === _getStyle(el, 'display') || 'hidden' === _getStyle(el, 'visibility') ) { return false; } if ( 'undefined' === typeof(t) || 'undefined' === typeof(r) || 'undefined' === typeof(b) || 'undefined' === typeof(l) || 'undefined' === typeof(w) || 'undefined' === typeof(h) ) { t = el.offsetTop; l = el.offsetLeft; b = t + el.offsetHeight; r = l + el.offsetWidth; w = el.offsetWidth; h = el.offsetHeight; } //-- If we have a parent, let's continue: if (p) { //-- Check if the parent can hide its children. if (('hidden' === _getStyle(p, 'overflow') || 'scroll' === _getStyle(p, 'overflow'))) { //-- Only check if the offset is different for the parent if ( //-- If the target element is to the right of the parent elm l + VISIBLE_PADDING > p.offsetWidth + p.scrollLeft || //-- If the target element is to the left of the parent elm l + w - VISIBLE_PADDING < p.scrollLeft || //-- If the target element is under the parent elm t + VISIBLE_PADDING > p.offsetHeight + p.scrollTop || //-- If the target element is above the parent elm t + h - VISIBLE_PADDING < p.scrollTop ) { //-- Our target element is out of bounds: return false; } } //-- Add the offset parent's left/top coords to our element's offset: if (el.offsetParent === p) { l += p.offsetLeft; t += p.offsetTop; } //-- Let's recursively check upwards: return _isVisible(p, t, r, b, l, w, h); } return true; } //-- Cross browser method to get style properties: function _getStyle(el, property) { if (window.getComputedStyle) { return document.defaultView.getComputedStyle(el, null)[property]; } if (el.currentStyle) { return el.currentStyle[property]; } } function _elementInDocument(element) { while (element = element.parentNode) { if (element == document) { return true; } } return false; } return _isVisible(this); }; 
     .list { overflow: hidden; white-space: nowrap; width: 100px; } .list li { display: inline-block; } 
     <ul class="list"> <li>text 1</li> <li>text 2</li> <li>text 3</li> <li>text 4</li> <li>text 5</li> <li>text 6</li> </ul> <hr /> <input type='button' id='show' value='Show only visible elements' /> <br /><br /> <div id='result'></div>

      You can measure the indentation in width and see if the elements go beyond

       var container = $('.list'), elements = $('li', container), checkOffset = container.width() + container.offset().left; elements.each(function(){ if ($(this).offset().left > checkOffset) $(this).addClass('hidden'); });

      There is a problem with calculating the offset of the container, where the elements lie (for some reason the standard margin is not taken into account), but these are nuances. https://jsfiddle.net/skywave/n5xze73g/

      • You need to use outerWidth (true) then it will take into account all indents))) - Shnur