Question

这是我的代码段：

如果我单击并拖动输入文本字段，我会得到溢出的div：隐藏滚动，就像溢出：auto一样。如果我设置溢出：隐藏在div上，我希望滚动像其他浏览器一样被锁定。

奇怪的是，如果我在输入字段上设置填充：0px，则Chrome上的问题不再出现。

这是Google Chrome错误吗？任何解决方法，使其无需使用Javascript工作？

编辑：这种行为也发生在Safari 5上。也许这是一个Webkit问题。

Answer 1

以下是为我解决的问题：

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?

更新2013-11： pointer-events:none解决了这个问题，但却存在许多缺点。该问题的最佳解决方法实际上是确保您没有溢出的内容，如“overflow:hidden容器的内容不大于所述容器。如果您想通过JavaScript滚动内容，请给它宽度和高度= 0，只要它是隐藏的并且只在移动之前调整它（使用关键帧动画或定时转换很容易完成）

重要提示：我在Chrome中遇到了一个奇怪的案例，其中有一个自定义的<input type=file>字段，当我通过CSS调整大小时不会引起任何溢出问题 - 开发工具确认，但是：看了之后在 Shadow-DOM 我意识到Chrome自己的“按钮”溢出了实际的输入字段，因此导致整个容器变大。

如何展示Shadow-DOM：如果看起来正确且仍然存在问题请访问Chrome开发工具，点击右下角的设置按钮。在“常规” - “元素”部分中的选项卡是启用“显示阴影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

我使用JQuery尝试了tiffon的解决方案，但无法让它与多个字段一起使用，在我将指针事件设置为无后，mouseup不会触发。

因此，将输入'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');                  
    }
});

问题是它不允许您选择字段内的文本，除非您使用键盘箭头键。

Answer 4

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

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

在Google Chrome中隐藏溢出隐藏和输入文字滚动

4 个答案: