只需簡單更換使用的MousePointer

我不確定我找什麼樣的代碼爲這裏的水平和垂直滾動 - 我想大概的JavaScript，雖然我不知道是否可以用CSS來實現只需簡單更換使用的MousePointer

情況： 我有一個div（具有固定的寬度和高度） - 此div的內容超出了其父級的寬度和高度，因此在垂直和水平方向上都有一個滾動條。

要實現的行爲： 當我在垂直滾動條上按住鼠標並向上或向下滾動時，內容將垂直滾動。當我在水平滾動中按住鼠標並向左或向右移動時，內容會水平滾動。這是我知道的默認和預期的行爲，我很精確，所以我的問題很清楚。

問題： 我想要做的就是這些行爲如此的直接交換：

當我按住我的鼠標的垂直滾動條和或水平拉下來，內容滾動

和

當我按住我的鼠標上水平滾動和向左或向右移動

我知道有相當明顯爲什麼這是一個壞主意的原因，但我需要能夠證明這一點，似乎無法找到任何例子。當我垂直滾動我的鼠標或者類似於經常出現的東西時，我不打算讓頁面水平滾動，我只是想交換垂直和水平滾動條的行爲。

如果需要，我可以發佈代碼，但情況非常普遍，我認爲，只是一個水平和垂直滾動條的div。

任何幫助，將不勝感激

來源

2012-10-08 Nick

無論你想出什麼都不會適用於移動設備，它們沒有相同的滾動條。只是說'......也許這一事實足以證明爲什麼它不是一個好主意。 – meetamit

我玩過它，但無法使它工作。我基本上攔截了滾動事件，並手動將滾動距離應用到了相反的軸上，效果不佳（滾動條似乎與自己爭鬥）。 –

這是絕對有可能的，起初我以爲這將是要麼不可能，或需要大量的工作的替代方案的許多不同的事情，但我已經在做這個給你jsFiidle：

jsFiddle example

這部作品的原因是因爲我先留着的每一個當前定位每個滾動事件與我的2個變量cur_left和cur_top發生時滾動。

然後，我使用new_left和new_top來設置兩個滾動條的新滾動位置。

使用此信息，我使用一個函數來檢查哪個滾動條首先被執行，只需檢查是否orig_left != cur_left。

然後，我簡單地設置新的滾動位置，相對於哪個事件最先出現，我還將確切的位置以及該示例下面發生的事件。

我希望這是你想要的並且容易理解，如果不是的話，我會爲你優化我的代碼！

注意

作爲meetamit指出，這樣做並不會很多，因爲路上觸摸滾動作品的手持設備的工作 - 測試iPad和它抖動和附近反彈
此示例使用jQuery進行編碼以便於使用
如果內容不具有相同的內容，則此示例將不起作用
高度與寬度的數量示例：

width = 250px; height = 200px;

與垂直
這是隻有在Frontmotion火狐

編輯

我已經測試滾動時，這將僅在水平滾動條向上滾動200像素注意到，在我的輸出框中，它總是說頂部，從不說左邊，這是因爲事件發生得非常快，因爲我已經置頂了，在左邊之後，我t覆蓋目標變量，然後你甚至可以看到它發生變化，爲了調試這個，我只需將一個console.log()加入到函數中，並且你肯定可以看到它出現了

來源

2012-10-24 22:51:11 pathurs

調試使用'console.log（）' –

@eicto你的意思是我需要調試我的代碼？請詳細說明您的意見 – pathurs

我的意思是不使用alert（）來調試 –

只需簡單更換使用的MousePointer

回答

相關問題