我可以通過「height = auto;」來滾動某個元素嗎？

我知道這個問題很混亂，但讓我解釋一下我正在努力實現的目標。我可以通過「height = auto;」來滾動某個元素嗎？

說我有以下的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>元素的位置，以便當鼠標光標位於「旋轉」div元素上方時，使用滾輪來旋轉元素的位置而不是滾動10000px頁面。我還需要所有我的< li>元素始終可見，並且如果需要，div可以容納任何其他< li>元素。

（最終我期望的結果將是在< Li的以下順序>元素）

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

現在設定div元素到一定的高度和「溢出：滾動;」不會給我我想要的結果。我想到了一個漫長而複雜的方式來做到這一點，但也許有人經驗豐富，可以給我一個很好的，優雅的方式來實現它。

來源

2012-08-04 user9349193413

你可以嘗試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)");

我希望這會有所幫助。

來源

2012-08-04 01:22:23

實現此目的的唯一方法就是使用javascript。改變DOM元素的順序需要腳本，如果你想讓它在滾輪上作出反應，那麼就需要腳本。請注意，這將是一種意想不到的行爲，可能會讓您的用戶感到困惑。在實際執行此操作之前，我會考慮三次。

始終保持div可見不那麼複雜。只要看看固定的定位與CSS（位置：固定;頂部：#px;左：#px;）。

來源

2012-08-04 01:29:43 Pevara

我可以通過「height = auto;」來滾動某個元素嗎？

回答

相關問題