我能滚动浏览一个元素吗;高度=自动&”;

Can I scroll through an element with "height = auto;"?

本文关键字：高度 自动 元素 一个 浏览 滚动      更新时间：2023-09-26

我知道这个问题令人困惑，但让我解释一下我试图实现的目标。

假设我有以下css和html。

<style>  
   body{ height: 10000px;}  
   #revolve{ border: 1px solid red; width: auto; height: auto;}  
</style>
<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

因为正文设置为一万像素，所以在正常使用滚轮时，整个页面会像正常情况一样向下滚动。

我希望能够改变<ul>元素，以便当鼠标光标位于"revolve"div元素上时，使用滚轮来切换元素的位置，而不是滚动10000px页面。我还需要我所有的<li>元素始终可见，并且div能够容纳任何其他<li>元素（如果需要）。

（最终我想要的结果将是以下<li>元素的顺序）

<li>  two </li>  
<li>  three </li>  
<li>  one  </li>

现在，将div元素设置为一定的高度，并且"overflow：scroll；"不会得到我想要的结果。我想了一个漫长而复杂的方法来实现它，但也许有一个经验丰富的人可以向我展示一个漂亮而优雅的方法来完成它。

您可以在#revolve中尝试position: fixed; top: 20px; left: 20px;，以始终保持在页面上让我在下面的例子中给你看，

<style>  
   body{ height: 10000px;}  
   #revolve{ position: fixed; top: 20px; left: 20px; border: 1px solid red; width: auto; height: auto;}  
</style>
<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

您可以使用jQuery函数将<li>的位置更改为以下

您可以使用jQuery的.after（）来移动元素。我克隆了其中一个，以便原始文件可以保留为占位符。这就像如果你想切换变量a和b，你需要第三个临时变量。

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

您的代码是：$("#revolve ul li:eq(1)").exchangePositionWith("#revolve ul li:eq(3)");

我希望这会有所帮助。

实现这一点的唯一方法是使用javascript。更改DOM元素的顺序需要脚本，如果您希望它在滚动轮上做出反应，则需要失败。请注意，这将是一种意外的行为，可能会让用户感到困惑，并可能让他们陷入困境。在实际实施之前，我会三思而后行。

保持div始终可见并不那么复杂。只需查看css的固定位置（位置：fixed；顶部：#px；左侧：#px）。

相关文章：