javascript - 我可以滚动浏览带有 "height = auto;"的元素吗?

标签 javascript jquery html css

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

假设我有以下 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/

相关文章:

html - 一个元素上的 CSS 两个过渡 ( :hover and :hover:after) not working

javascript - ThreeJS 创造一个太阳

javascript - Math.log2 的替代方案

javascript - 如何重构这段 JQuery 代码,使其遵循 DRY 原则

jquery - 使用 jQuery 将 1000 格式化为 10.00

javascript - $(window).resize 不工作

javascript - 如何在平板电脑网站上保持 HTML5 网络摄像头垂直旋转

javascript - jQuery onclick,选择输入框并按回车键(渲染html)

html - 在表格单元格中将图标右对齐?

javascript - ajax内容应用到元素后执行js函数