css 当滚动显示时，如何在相对父div内的绝对子div中显示更多结果

brvekthn  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(81)

当我垂直收缩浏览器窗口时，第一个网格单元格显示滚动，我已经尝试过不同的方法来显示一个“更多结果”链接，而不是在这种情况下滚动，没有预期的结果
我想要包含G1的div... G3（第一个单元格），而不是滚动，将此div更改为“显示结果”链接
最佳实践是什么？
示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<main class="flex h-fit h-screen">
  <div class="text-primaryTextColor bg-primaryMainBg ml-2 mr-4 h-full w-full rounded-2xl p-3">
    <ul class="grid grid-cols-7 gap-3 pb-1">
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">LUN</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">MAR</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">MIÉ</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">JUE</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">VIE</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">SÁB</li>
      <li class="select-none list-none text-center text-xs font-semibold text-gray-500">DOM</li>
    </ul>
    <ul class="grid h-full grid-cols-7 gap-3 pb-6">
      <a class="relative h-full overflow-auto active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li class="absolute w-full">
          <div class="mb-2">29</div>
          <div class="m-0.5 flex bg-red-300 pl-2 pr-2">
            <div class="flex grow">G 1</div>
            <div class="flex">1000</div>
          </div>
          <div class="m-0.5 flex bg-red-300 pl-2 pr-2">
            <div class="flex grow">G 2</div>
            <div class="flex">2000</div>
          </div>
          <div class="m-0.5 flex bg-red-300 pl-2 pr-2">
            <div class="flex grow">G 3</div>
            <div class="flex">3000</div>
          </div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">30</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">31</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">1</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">2</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">3</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">4</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">5</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">6</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">7</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">8</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">9</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">10</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">11</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">12</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">13</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">14</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">15</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">16</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">17</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">18</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">19</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">20</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">21</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">22</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">23</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">24</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">25</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">26</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">27</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">28</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">29</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">30</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">1</div>
        </li>
      </a>
      <a class="active:bg-primaryOptionSelected cursor-pointer select-none list-none border bg-gray-50 bg-opacity-50 pt-1 text-center text-xs font-semibold text-gray-500 duration-300 hover:shadow-md hover:shadow-gray-300" href="/crearGasto">
        <li>
          <div class="mb-2">2</div>
        </li>
      </a>
    </ul>
  </div>
</main>
css

1条答案

按热度按时间
mf98qq94

mf98qq941#

最后使用ResizeObserver的UseEffect解决

useEffect(() => {
const absElementRoot = document.getElementById('absoluteDiv');
const observedRelElement = document.getElementById('relativeDiv');

const resizeObserver = new ResizeObserver(
    (entries) => {
        if (absElementRoot && absElementRoot.clientHeight > entries[0].target.clientHeight) {
            console.log('IsSrolling')
        }
    }
);

if (observedRelElement) {
    resizeObserver.observe(observedRelElement);
}
return () => resizeObserver.disconnect() }, [])
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com