禁用鼠標拖動以避免滾動

我想避免以下場景的點擊和拖動功能。禁用鼠標拖動以避免滾動

我有兩個div

包裝股利

{ 寬度：400像素; height：400px; overflow-x：hidden; }
內容的div

{ 寬度：1 200像素; height：400px;/*注意寬度/ DIV包裝*的3倍 }

內容的div是包裝DIV的孩子。 wrapper div作爲視圖端口只用於顯示內容div。

當用戶點擊按鈕時，我會設置滾動位置以顯示包裝內容div的正確部分（0-400,401-800,801-1200）但是，如果用戶點擊並拖動鼠標指針， div被滾動（因爲拖動）。我想避免點擊和拖動這個滾動。

我曾嘗試以下的事情：

var isMouseDown = false; 
function onmousedown(event) { 
    isMouseDown = true; 
} 

function onmouseup(event) { 
    isMouseDown = false; 
} 

function onmousemove(event) { 
    if (isMouseDown) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     event.cancelBubble = true; 
     event.returnValue = false; 
     return false; 
    } 
}

上面的代碼並不能幫助我。

任何幫助表示讚賞。

在此先感謝。

來源

2013-10-01 Sanket

假設您使用鍵盤上的箭頭，也可以滾動，同時按空格鍵將導致屏幕滾動。您可能想在使用突出顯示/拖動來處理滾動之前檢查這些。 –

它不是垂直滾動。另外滾動條不可見，因爲overflow-x是隱藏的。因此，箭頭鍵和空格不會左右移動屏幕。但是當你點擊並拖動滾動發生時。屏幕部分偏移，這是令人討厭的我的用戶界面。 – Sanket

我檢查包裝div是否滾動。

我添加了事件「onscroll」，並設置一個全局變量「shouldScroll」爲true，當按鈕被點擊時，當div滾動到所需位置時將其設置爲false。

當用戶點擊並拖動鼠標時，包裝div滾動事件被激發，但我檢查「shouldScroll」是否爲真，然後只允許滾動，否則滾動到當前位置。

單擊按鈕我將當前滾動位置設置爲一個全局變量。

來源

2013-10-03 03:51:36 Sanket

禁用鼠標拖動以避免滾動

回答

相關問題