目标文档的其余部分，停止滚动和toggleClass

Question

我正在处理下拉菜单，并且我正在使用jQuery来操作DOM。到目前为止，我可以切换菜单进出视野。每当菜单是在视图中，我有它CSS位置属性设置为固定与顶部，左侧和底部属性设置为零及其宽度至90％如下

.menu-container{ 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    width:90% 
} 

我的问题是双重的

1. 当我在菜单上滚动时（例如测试时），文档的其余部分也会滚动。我想限制滚动到 菜单容器，每当菜单是在视图中。

   $('.menu-container').hasClass('menu-open'){ 
       //rest of body doesn't scroll 
   } 
   

2. 第二，由于菜单宽度被设定为90％，我想切换 菜单离视图每当一个单击菜单容器外。

   $('rest of body').on('click', function(){ 
       //Toggle menu out of view 
   }); 
   

虽然我在找一个jQuery修复，任何其他实施包括原材料的JavaScript直接操作将不胜感激。

谢谢。

Answer 1

该文件将采取滚动动作过程中始终向上滚动，除非鼠标在一个元素本身具有滚动，即，它具有overflow: scroll或overflow: auto，并考虑一定的高度

有了这个，修改你的菜单有

overflow: scroll; 
height: 300px; /* for example */ 

接下来，如何关闭模糊。这里的逻辑是你想调用任何不在菜单内的点击的关闭 - 换句话说，点击不应该在菜单本身或其任何子/后代元素上。具体方法如下：

$('body').on('click', '*', function() { 
    if (!$(this).closest('.menu-container').length) $('.menu-container').hide(); 
}); 

由于closest()检查匹配的元素与其父/反对通过选择祖先，它是这种检查的一个不错的选择。

Answer 2

对于第一次我建议让你的容器全屏。既然你说你已经有了overflow: scroll设置其他的变化将是

.menu-container{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height: 100%; 
} 

而对于第二个，你可以做

$('body').on('click', function(){ 
    if(!$(this).closest('.menu-container').length){ 
     //Toggle menu out of view 
    } 

});