定位第一个和最后一个非溢出元素

Question

为了返回溢出到右边和左边的项目数，我正在寻找一种方法来定位第一个和最后一个没有溢出的元素（所以我可以在它们之前和之后计算）。

＆＃13;

＆＃13;

.container {
  overflow: hidden;
  width: 430px;
  display: flex;
  border: 2px solid green;
}

.inner {
  height: 100px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  right: 145px
}

a {
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  margin: 0 10px;
}

＆＃13;

<div class="container">
  <div class="inner">
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
    <a>7</a>
    <a>8</a>
    <a>9</a>
    <a>10</a>
    <a>11</a>
    <a>12</a>
    <a>13</a>
    <a>14</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在这个例子中，我如何定位第一个和最后一个没有溢出的元素（在本例中为3和8）？

我尝试了$('.inner a:visible').last()或$('.inner a:visible:last')之类的内容，但它不起作用。

谢谢！

Answer 1

您可以使用offset()，然后filter()输出小于0且大于父宽度的元素，并获取第一个和最后一个元素。

＆＃13;

＆＃13;

var c = $('.container');
var cl = c.offset().left;

$('a').filter(function() {
  var xl = $(this).offset().left
  return (cl - xl) < 0
}).first().css('background', 'red')

$('a').filter(function() {
  var xl = $(this).offset().left
  return xl < (cl + c.width())
}).last().css('background', 'red')

＆＃13;

.container {
  overflow: hidden;
  width: 430px;
  display: flex;
  border: 2px solid green;
  margin-left: 100px;
}

.inner {
  height: 100px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  right: 145px;
}

a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  margin: 0 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="inner">
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
    <a>7</a>
    <a>8</a>
    <a>9</a>
    <a>10</a>
    <a>11</a>
    <a>12</a>
    <a>13</a>
    <a>14</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;