使用溢出时div内容向上滚动：IE 10中的自动答案

【问题标题】：div contents scrolls back up when using overflow: auto in IE 10使用溢出时div内容向上滚动：IE 10中的自动
【发布时间】：2013-06-11 15:57:35
【问题描述】：

我正在尝试在 div 中添加多个输入元素和其他数据，并为该 div 使用 overflow:auto（使用 jquery 显示/隐藏该 div）

它在 Firefox 浏览器中运行良好，但在 IE (10) 中，当元素超过该 div 的高度时，滚动条会出现，但是当用户使用滚动条向下滚动，然后如果移动鼠标移到该 div 中的任何输入元素或其他元素以输入数据时，div 内容将向上滚动到顶部。因此用户无法访问低于该 div 高度的该 div 的元素/内容

这是小提琴的链接，您可以在其中查看代码 http://jsfiddle.net/euMJn/1/

该 html 页面的代码（因为 jsfiddle 链接需要代码）

任何帮助或指导将不胜感激

感谢您的帮助和时间

----下面的代码开始----

<html>
<head>
<title>Div Scroll</title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"
        type="text/css" rel="Stylesheet" />

<style>
#outer{
    width:400px;
    height:400px;
    position:absolute;
    left:30px;
    top:30px;
    border-style:solid;
    border-width:1px;
    z-index: 1;
    display:none;
    overflow: auto;

}

#inner{
    width:300px;
    height:300px;
    position:relative;
    left:20px;
    top:20px;
    overflow: auto;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script >
 $(document).ready(function(){  


    $('#trigger').mouseover(function(e){                
        $('#outer').show();                                    
    }); 

    $('#trigger').mouseout(function(){
        $('#outer').hide();
    });

    $('#outer').mouseover(function(){
        $('#outer').show();         
    }); 

    $('#outer').mouseout(function(){
        $('#outer').hide();
    }); 

});     
</script>

</head>


<body>
<button id='trigger' style="background-color:yellow"> Mouse over here</button>
<br/><br/>
<div id="outer"> 
    <div id="inner"> 
        <p>Text above input01</p>
        <label for='input01'>Input 1: </label> <input name='input01' id='inp01' type='text' size='25' value='input' >
        <br>
        <p>Text above input02</p>       
        <label for='input02'>Input 2: </label> <input name='input02' id='inp02' type='text' size='25' value='input' >
        <br>
        <p>Text above input03</p>       
        <label for='input03'>Input 3: </label> <input name='input03' id='inp03' type='text' size='25' value='input' >
        <br>
        <p>Text above input04</p>       
        <label for='input04'>Input 4: </label> <input name='input04' id='inp04' type='text' size='25' value='input' >
        <br>
        <p>Text above input05</p>       
        <label for='input05'>Input 5: </label> <input name='input05' id='inp05' type='text' size='25' value='input' >
        <br>
        <p>Text above input06</p>       
        <label for='input06'>Input 6: </label> <input name='input06' id='inp06' type='text' size='25' value='input' >
        <p>Text above input07</p>       
        <label for='input07'>Input 7: </label> <input name='input06' id='inp07' type='text' size='25' value='input' >
        <p>Text above input08</p>       
        <label for='input08'>Input 8: </label> <input name='input06' id='inp08' type='text' size='25' value='input' >
        <p>Text above input09</p>       
        <label for='input09'>Input 9: </label> <input name='input06' id='inp09' type='text' size='25' value='input' >
        <p>Text above input10</p>       
        <label for='input10'>Input 10: </label> <input name='input06' id='inp10' type='text' size='25' value='input' >      
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html css overflow

【解决方案1】：

不要使用mouseout，而是使用mouseleave。

$('#outer').mouseleave(function () {
    $(this).hide();
});

New fiddle here.

如果您查看 jQuery.mouseleave 文档，您会注意到这一行。

mouseout 也会在指针移出子元素时触发，而mouseleave 仅在指针移出绑定元素时触发。

基本上，当您将鼠标悬停在子元素上时，IE 会决定重置可见性，从而重置外部 div 的可见性。其他浏览器似乎足够智能，如果它已经可见，它们就不会触摸它。

【讨论】：

它就像一个魅力，非常感谢你不仅提供了解决方案，还解释了它为什么这样做以及为什么新的修复程序会修复它。再次感谢您的帮助和时间