在qunit中，如何查询滚动条高度或者检测元素上是否存在滚动条？

Question

我正在为我的 Ember 组件编写测试。其中一个更微妙的问题是让特定元素滚动，而不在其他地方生成滚动条。

我正在尝试编写一个测试，它会告诉我代码何时破坏我的滚动设置。我尝试了多种语法和策略。 get 不起作用，因为scrollHeight 不是属性。 qunit 访问器没有 get 属性值。 qunit hasProperty 让我可以检测某个属性是否具有特定值，但不能检测它是否高于或低于或与另一个属性进行任何比较。

const scrollElement = assert.dom('[data-test-user-list-ul-element]');

var hasVerticalScrollbar = scrollElement.get('scrollHeight') > scrollElement.get('clientHeight');

assert.true(hasVerticalScrollbar);

Answer 1

你非常接近！！

元素没有

get

属性，因此您可能想直接查看

scrollHeight

和

clientHeight

：

例如在我的 ember-primitives 项目中，我这样计算滚动顶部位置：

function getTop(element?: Element | null | undefined) {
  assert('Could not find scroller', element);

  return element.scrollHeight - element.clientHeight;
}

所以你可以像这样定义一个

hasScrollBar

：

function hasScrollbar(element?: Element | null | undefined) {
  assert(`Can't check if a scrollbar exists on an element, if the element doesn't exist`, element);

  return element.scrollHeight === element.clientHeight;
}

这里是一组测试示例，用于处理滚动位置。

参考资料：

• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
• https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight