溢出隱藏和輸入文本滾動

這裏是我的代碼片段：溢出隱藏和輸入文本滾動

http://jsfiddle.net/7CuBV/6/

如果我點擊並輸入文本字段拖，我得到溢出DIV：隱藏滾動，因爲它會做溢出：自動。如果我設置了overflow：隱藏在div上，我希望滾動可以像其他瀏覽器一樣被鎖定。

奇怪的是，如果我在輸入字段上設置了padding：0px，Chrome上的問題就不會再發生了。

這是Google Chrome的錯誤嗎？任何解決方法，使其工作，而無需使用JavaScript？

編輯：這種行爲也發生在Safari 5上。也許這是一個Webkit問題。

來源

2012-06-05 fuegod

這裏同樣的問題，除了解決方法不適用於我。 :-( – danorton

下面是固定的，對我來說：

input:active { pointer-events:none; }

感謝https://stackoverflow.com/users/498031/vken指點這個在這個類似的問題：Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?

UPDATE 2013-11： pointer-events:none解決了這個問題，但有許多缺點。該問題的最佳解決方法是確保您沒有滿溢的內容，因爲「overflow:hidden容器的內容不大於所述容器的內容。如果您想通過JavaScript滾動內容，請將其寬度設爲& height = 0，只要它是隱藏的並且在移動之前調整它的大小（易於使用關鍵幀動畫或定時轉換完成）

重要信息：我遇到一個奇怪的情況在Chrome中定製<input type=file>字段，當我通過CSS調整大小時，它不應該導致任何溢出問題 - 開發工具證實，但：在看了Shadow-DOM後，我意識到Chrome自己的「按鈕」溢出實際的輸入字段，因此導致整個容器變大。

如何顯示Shadow-DOM：如果事情看起來不錯，它仍然是一個問題，請點擊Chrome Dev-Tools，點擊右下角的設置按鈕。在「元素」部分的「常規」選項卡中，啓用「顯示陰影DOM」選項。這將爲您提供所發生事情的全貌...雖然大部分時間它只是增加了另一層複雜性，但這真的很有幫助！

來源

2013-05-23 14:41:02

非常感謝，這正是我所需要的;-) – fuegod

哇，這太好了！ –

不幸的是，用戶通過使用此解決方案突出顯示鼠標不能再向下滾動。另外，它涉及到在JS中偵聽事件時的其他含義。請參閱我的答案以獲得更強大的解決方案。 –

我也遇到過這個問題。到目前爲止，我得到的最好的東西是使用pointer-events:none;。我能得到它的唯一方法是設置display: none;。否則它會被忽略，所以短暫閃爍。

http://jsfiddle.net/7CuBV/21/

var tx = document.getElementById('tx'), 
    bod = document.body; 

tx.addEventListener('mousedown', tx_ondown); 

function tx_ondown() { 
    bod.addEventListener('mousemove', b_onmove); 
    bod.addEventListener('mouseup', b_onup); 
    bod.addEventListener('mouseout', b_onup);  
} 

function b_onmove() { 
    tx.style.pointerEvents = 'none'; 
    tx.style.display = 'none'; 

    setTimeout(function() { 
     tx.style.display = ''; 
    }, 0); 
    bod.removeEventListener('mousemove', b_onmove); 
} 

function b_onup() { 
    if (tx.style.pointerEvents === 'none') { 
     tx.style.pointerEvents = ''; 
    } else { 
     bod.removeEventListener('mousemove', b_onmove); 
    } 
    bod.removeEventListener('mouseup', b_onup); 
    bod.removeEventListener('mouseout', b_onup);   
}

來源

2012-12-16 00:11:15 tiffon

我喜歡你的解決方案 – DoubleYo

@DoubleYo謝謝 – tiffon

我試圖tiffon的解決方案使用JQuery，但不能把它與多個領域的工作，鼠標鬆開不會解僱我已經設置指針事件後無來者。

因此，將輸入'pointer-events'設置爲none可以解決滾動到隱藏內容中的問題，但它可以防止用戶使用鼠標事件聚焦該字段。但我注意到點擊標籤仍然可以集中注意力。

所以我做了這個解決方法，工作原因是我所有的字段都嵌套在div的內部。基本上，點擊該字段不集中，但仍然氣泡事件到它的父：

$('label').click(function(e){ 
    e.stopPropagation(); 
}); 
$('input[type="text"], textarea').parent().click(function(){ 
    $(this).find('label').click(); 
}); 
$('input[type="text"], textarea').on({ 
    mousedown:function(){ 
     $(this).css('pointer-events', 'none');     
    } 
});

問題是，它不會讓你選擇字段中的文本，除非你使用鍵盤上的箭頭鍵。

來源

2013-02-08 14:11:20 erik

設置scrollLeft和/或scrollTop的在「onscroll」事件0，這將禁用滾動：

var div = $(".overflow-hidden"); 
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });

來源

2013-05-10 14:09:42 Sergey

溢出隱藏和輸入文本滾動

回答

相關問題