Question

我正在使用jQuery的animate()来更改div的高度：

$(this).animate({
  height: '60%'
});

问题是它会自动滚动到div的顶部，我不想发生这种情况。我还注意到，当我以像素height: '400px'指定高度时，不会发生这种情况，但是我确实需要一个百分比。

实时示例：http://jsfiddle.net/vdcqgjyn/3/

如何防止div自动滚动到顶部？谢谢

编辑（05/16/19）

我还没有找到合适的解决方案，而是一个简单的技巧，即使用像素值会起作用：

let h = Math.round( $(this).parent().innerHeight() * 60/100 );
$(this).animate({
  height: h+'px'
});

此技巧在实际示例中不起作用，因为您需要有一个固定高度的父母。

还是想知道是否可以通过更清洁的方式解决该问题！

Answer 1

问题是因为当jQuery在维度属性上运行animate()时，它会在受影响的元素上设置overflow: hidden。动画结束时，它将overflow重设为原始设置。这样，当减小该值时，滚动位置将返回到顶部。

要解决此问题，您需要在元素上覆盖overflow，以使jQuery不会更改它：

.div-animate.percentage,
.div-animate.pixels {
  overflow: auto !important;
}

$(".percentage").on("click", function(e) {
  $(this).animate({
    height: '60%'
  });
});

$(".pixels").on("click", function(e) {
  $(this).animate({
    height: '400px'
  });
});

.div-animate {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 100px;
  outline: solid 1px;
  overflow: auto;
}

.percentage {
  left: 10px;
}

.div-animate.percentage,
.div-animate.pixels {
  overflow: auto !important;
}

.pixels {
  left: 320px;
}

ul li {
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
SCROLL THE DIV THEN CLICK IT

<div class="div-animate percentage">
  PERCENTAGE
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

<div class="div-animate pixels">
  PIXELS
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

我不喜欢在这里使用!important，但是不幸的是，当前没有其他选择，因为jQuery将overflow样式添加到内联style属性中的元素上。

jQuery动画高度以百分比滚动到顶部

1 个答案: