在基於webkit的瀏覽器上禁用溢出滾動

我使用::after來創建陰影來裝飾元素（比如A）。在基於webkit的瀏覽器上禁用溢出滾動

爲了做到這一點，我設置了overflow: hidden爲A以隱藏不需要的部分陰影。

看起來很完美，但是在input框中添加A後出現問題。如果我點擊input並拖動，A圖層將滾動，其餘部分陰影將顯示出來。

這裏是demo和簡化代碼：

<div style="width: 200px; height: 30px; overflow: hidden; border: 1px black dotted;"> 
    <div style="height: 30px; border-bottom: red 10px solid;"> 
    <input style="width: 200px" placeholder="click and drag me downward" /> 
    </div> 
</div>

我正在尋找一個純CSS的解決方案來解決這個問題。謝謝你。

來源

2013-08-21 xiaoyi

最後來到一個解決方案，這並不完美，但無論如何解決了問題。

由於背景溢出，並且同一圖層上的輸入會導致問題。所以只需將輸入移動到另一個不會溢出的層。 demo

<div style="position: relative; width: 200px; height: 30px; border: 1px black dotted;"> 
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;"> 
     <div style="height: 30px; border-bottom: red 10px solid;"></div> 
    </div> 
    <input style="width: 160px" placeholder="click and drag me downward" /> 
</div>

來源

2013-08-29 05:18:35 xiaoyi

這不是一個理想的解決方案，但我不認爲純粹的CSS解決方案存在這個問題（不幸），這讓我懷疑這是否被記錄爲Chrome團隊的錯誤。

jQuery的應該是如下：

$('input').on('mousedown', function(e){ 
    $(e.target).focus(); 
    e.preventDefault(); 
});

（我知道我不應該你使用jQuery，如果需要的話我可以爲您提供一個純粹的JS解決方案假設，它只會更復雜）。

小提琴：http://jsfiddle.net/jzb5a/

編輯：顯然，這是一個已知的bug（https://bugs.webkit.org/show_bug.cgi?id=114384）這是dissapointing上有4個月依然沒有得到修復，但。

來源

2013-08-21 17:47:22 Sean

雖然它解決的主要問題，但引入了更多的問題（例如，不能選擇'input'文本）。 Upvoted，並感謝 – xiaoyi

在基於webkit的瀏覽器上禁用溢出滾動

回答

相關問題