我知道这个问题令人困惑,但让我解释一下我要实现的目标。
假设我有以下 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>
因为正文设置为一万像素,在正常使用滚轮时,整个页面会正常向下滚动。
我希望能够更改
- 元素的位置,以便当鼠标光标位于“旋转”div 元素上时,使用滚轮交换元素的位置而不是滚动 10000px页。我还需要我的所有 < li> 元素始终可见,并且 div 能够在需要时容纳任何其他 < li> 元素。
- 元素的以下顺序)
<li> two </li> <li> three </li> <li> one </li>
现在将 div 元素设置到一定高度并“溢出:滚动;”不会给我我想要的结果。我想到了一个漫长而复杂的方法来做到这一点,但也许有经验的人可以告诉我一个漂亮而优雅的实现方法。
(最终我想要的结果是
最佳答案
你可以试试position: fixed; top: 20px; left: 20px;
在#revolve 中,始终保持在页面上
让我在下面的示例中向您展示,
<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 - 我可以滚动浏览带有 "height = auto;"的元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11805134/