vue中改变滚动条高度无效

在Vue中改变滚动条高度无效通常是因为使用了错误的CSS属性或者没有正确地绑定数据到滚动条上。

首先，确保你指定了正确的CSS属性来改变滚动条高度。在大多数现代浏览器中，滚动条被认为是一个CSS伪元素，可以通过`::-webkit-scrollbar`选择器来修改。例如，你可以在CSS中添加以下样式来改变滚动条高度：

::-webkit-scrollbar {
  height: 10px; // 设置滚动条高度为10像素
}

其次，检查Vue组件中是否正确地绑定了数据到滚动条上。你可以使用`v-bind`指令将需要的数据绑定到滚动条上。例如，在Vue组件中可以这样绑定滚动条高度：

<div v-bind:style="{ 'height': scrollHeight + 'px' }">
  <!-- 根据scrollHeight的值改变滚动条的高度 -->
  <!-- 这里的scrollHeight可以是一个data属性或者计算属性 -->
  <!-- 需要确保scrollHeight的值是一个有效的数字，例如50 -->
</div>

最后，确保你的代码没有其他因素导致滚动条高度无效，例如外部CSS样式的干扰或者其他Vue组件中的代码导致冲突。你可以尝试简化你的代码，并逐步排查问题的源头。

总结起来，如果在Vue中改变滚动条高度无效，首先检查你使用的CSS属性是否正确，并确保正确地绑定了数据到滚动条上。进一步，可通过简化代码来查找潜在的问题来源。

相关问题

vue 获取当前滚动条高度

你可以通过以下代码获取 Vue 中当前滚动条的高度：

computed: {
  scrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
  }
}

其中 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 分别用于兼容不同浏览器的滚动条高度获取方式。

Vue 中设置当前滚动条的高度

在 Vue 中设置当前滚动条的高度可以通过 `$refs` 来获取到组件中的元素，然后使用 `scrollTop` 属性来设置滚动条的高度。示例代码如下：

<template>
  <div ref="scrollContainer" style="height: 200px; overflow-y: scroll;">
    <!-- content -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 设置滚动条的高度为 100px
    this.$refs.scrollContainer.scrollTop = 100;
  }
}
</script>

在上面的代码中，我们通过 `ref` 属性给滚动容器元素起了一个名字 `scrollContainer`，然后在 `mounted` 生命周期中通过 `this.$refs.scrollContainer` 来获取到该元素，最后通过设置 `scrollTop` 属性来设置滚动条的高度为 100px。