Question

我在文档正文中附加了ul元素“dropdown-menu-ap”。

当我特别改变左侧和顶部的CSS样式时，它会触发我正在收听的窗口调整大小事件以用于其他目的。这仅适用于Chrome浏览器。

请分享是否有人知道这种情况下窗口调整大小的真正原因是什么？

html的屏幕截图如下所示：

代码段如下所示：

$dd.css({
 top: topval,
 left: left
 })
var autoH = $dd.height();

元素使用的css样式如下所示：

.dropdown-menu-ap {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 16.5em;
  padding: 0.3em 0.5em;
  margin: -10px 0 0 0;
  list-style: none;
  background-color: #3C4d4c;
  border: 1px solid #637271;
  border-radius: 0;
  box-shadow: 0.3em 0.3em 0.7em rgba(0,0,0,0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: left;
  font-size: 84% !important;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif  !important;
  font-style: normal;
  color: #B9B9B9  !important;
}

Answer 1

我确实没有得到问题的确切解决方案。但是为了避免不必要的窗口调整大小事件，比较之前的窗口宽度和高度，如果宽度或高度不同，则继续窗口调整大小事件。这只是一种解决方案。

private previousWindowWidth = 0; private previousWindowHeight = 0;

private onWindowResize（）：void {

var windowWidth = window.innerWidth;
var windowHt = window.innerHeight;
if (previousWindowWidth  === windowWidth && previousWindowHeight === 
    windowHt ) {
    return;
 }

previousWindowWidth = windowWidth ;
previousWindowHeight = windowHt ;

// continue with other operations
..................................
}

更改body的子元素的css样式会导致chrome中的触发窗口调整大小事件

1 个答案: