Question

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

说我有以下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>

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

我希望能够改变＆lt;的位置。 UL＆GT;元素，当鼠标光标在“旋转”div元素上时，使用滚轮交换元素的位置而不是滚动10000px页面。我还需要我所有的＆lt;李＆GT;元素在任何时候都是可见的，div可以容纳任何其他的＆lt;李＆GT;元素如果需要。

（最终我期望的结果将按照＆lt; li＆gt;元素的以下顺序）

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

现在将div元素设置为某个高度并“overflow：scroll;”不会给我我想要的结果。我想到了一个漫长而复杂的方法，但也许有经验丰富的人可以向我展示一种美好而优雅的方式来实现它。

Answer 1

您可以在#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)");

我希望这会有所帮助。

Answer 2

实现这一目标的唯一方法是使用javascript。更改DOM元素的顺序需要编写脚本，如果您希望它在滚轮上做出反应，则会出现问题。请注意，这将是一个意外的行为，可能会让用户感到困惑。在实施这个之前我会三思而后行。

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

我可以使用“height = auto;”滚动元素吗？

2 个答案: