溢出隐藏和谷歌浏览器输入文本滚动(Overflow hidden and input text sc

这里是我的代码片段：

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

如果我点击并输入文本字段拖，我得到溢出DIV：隐藏滚动，因为它将溢出做：汽车。如果我设置溢出：隐藏在一个div上，我想其他的浏览器做滚动被锁定。

好奇的是，如果我设置填充：0像素的输入栏，不会再出现在Chrome浏览器中的问题。

它是一个谷歌浏览器的错误？任何解决方法，以使其不使用JavaScript的工作吗？

编辑：此行为发生在Safari 5的太多。也许这是一个Webkit的问题。

Answer 1:

下面是固定的，对我来说：

input:active { pointer-events:none; }

感谢https://stackoverflow.com/users/498031/vken在这个类似的问题，指出这一点上：问题在文本输入字段点击拖动选择也滚动父元素，WebKit的错误或功能？

UPDATE 2013-11： pointer-events:none修复该问题，但配有许多缺点。对于这个问题最好的解决方法实际上是要确保你有没有溢出的内容，如“在内容overflow:hidden容器不大于所述容器大如果你想通过JavaScript滚动的内容，给它的宽度和高度= 0作为长。因为它是隐藏在移动之前调整它的大小只有正确的（容易与关键帧动画或定时切换完成）

重要提示：我遇到了一个奇怪的情况下使用自定义的<input type=file>在Chrome场，因为我通过CSS调整它应该不会造成任何溢出问题-开发工具证实，但：采取一看后暗影DOM我意识到，Chrome的自己的“按钮”溢出实际输入场，因此导致整个容器要大些。

如何显示阴影-DOM：如果事情看起来正确的，它仍然是一个问题去Chrome浏览器开发工具，在右下角点击设置-按钮。在上一节“元素”中的“常规” -Tab是启用“显示阴影DOM”的选项。这会给你发生了什么事情的整个画面......虽然大多数时候它只是增加了另一层复杂性，这是非常有帮助！

Answer 2:

我碰到了这个。到目前为止，这件事我已经得到的工作是用最好的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);        
}

Answer 3:

我试图tiffon的解决方案使用JQuery，但不能把它与多个领域的工作，鼠标松开不会解雇我已经设置指针事件后无来者。

所以，输入“指针事件”设置为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');                  
    }
});

问题是，它不会让你选择字段中的文本，除非你使用键盘上的箭头键。

Answer 4:

在“onscroll”事件设置scrollLeft和/或scrollTop的为0，这将禁用滚动：

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

文章来源: Overflow hidden and input text scrolling in Google Chrome