滚动条无法滚动到最底部?

[FrontEnd-Hub]

页面加载后滚动条无法拖动或者手动拉到最底部, 容器里面内容也会展示不全

[唐道海]

@FrontEnd-Hub 可否提供一下示例代码？

[FrontEnd-Hub]

<div class="table-scroll"> <happy-scroll color="#fff" :size="2" :min-length-v="10" :resize="true" ref="tableScroll"> <div class="con"> <wis-empty style="width: 185px;" v-if="tableData.length === 0" /> <div :class="tableItem.checked ? 'table-row checked' : 'table-row'" v-for="(tableItem, tableIndex) in tableData" :key="tableItem.id" @click="pickTable(tableIndex)" > <div class="row-left"> <div class="row-left-text">{{ tableItem.type }}</div> </div> <div class="row-right"> <div class="row-right-text">{{ tableItem.name }}</div> <!-- <wis-tip> <div class="row-right-text">{{ tableItem.name }}</div> </wis-tip>--> </div> <div class="row-arrow" v-show="tableItem.checked"></div> </div> </div> </happy-scroll> </div>

css:
.table-scroll { padding-top: 15px; width: 100%; height: calc(100% - 40px); }

js:

// 页面初始化mounted函数调用
initPage(){
  this.tableData = [] // 数组数据
  this.currentTable = this.tableData[0]
  this.$forceUpdate()
  this.$nextTick(() => {
        this.resizeScroll('tableScroll')
        this.resizeScroll('detailScroll')
      })
const _this = this
      window.onresize = function () {
        _this.resizeScroll('tableScroll')
        _this.resizeScroll('detailScroll')
      }
}

// 这个是你们之前提供的窗口尺寸修改的方法
resizeScroll (scroll) {
      const happyScroll = this.$refs[scroll]
      // 计算最外层宽高，设置滚动条元素的宽高
      happyScroll.setContainerSize()
      happyScroll.$nextTick(() => {
        happyScroll.computeStripX()
        happyScroll.computeStripY()
        happyScroll.checkScrollMode()
        happyScroll.initBrowserSize()
      })
      happyScroll.resizeListener()
   }

[FrontEnd-Hub]

v-for循环生成, 当前页面刷新正常, 然后跳转其他页面再进来这个页面就无法滚动到最底部, 另外页面都没有keep-alive

[唐道海]

<div class="table-scroll"> <happy-scroll color="#fff" :size="2" :min-length-v="10" :resize="true" ref="tableScroll"> <div class="con"> <wis-empty style="width: 185px;" v-if="tableData.length === 0" /> <div :class="tableItem.checked ? 'table-row checked' : 'table-row'" v-for="(tableItem, tableIndex) in tableData" :key="tableItem.id" @click="pickTable(tableIndex)" > <div class="row-left"> <div class="row-left-text">{{ tableItem.type }}</div> </div> <div class="row-right"> <div class="row-right-text">{{ tableItem.name }}</div> <!-- <wis-tip> <div class="row-right-text">{{ tableItem.name }}</div> </wis-tip>--> </div> <div class="row-arrow" v-show="tableItem.checked"></div> </div> </div> </happy-scroll> </div>

css:
.table-scroll { padding-top: 15px; width: 100%; height: calc(100% - 40px); }

js:

// 页面初始化mounted函数调用
initPage(){
  this.tableData = [] // 数组数据
  this.currentTable = this.tableData[0]
  this.$forceUpdate()
  this.$nextTick(() => {
        this.resizeScroll('tableScroll')
        this.resizeScroll('detailScroll')
      })
const _this = this
      window.onresize = function () {
        _this.resizeScroll('tableScroll')
        _this.resizeScroll('detailScroll')
      }
}

// 这个是你们之前提供的窗口尺寸修改的方法
resizeScroll (scroll) {
      const happyScroll = this.$refs[scroll]
      // 计算最外层宽高，设置滚动条元素的宽高
      happyScroll.setContainerSize()
      happyScroll.$nextTick(() => {
        happyScroll.computeStripX()
        happyScroll.computeStripY()
        happyScroll.checkScrollMode()
        happyScroll.initBrowserSize()
      })
      happyScroll.resizeListener()
   }

resizeScroll 方法内部是在父级容器大小发生变化的时候，去让 happy-scroll 去调整大小，如果你的父级容器不会发生变化，不用这么操作

[FrontEnd-Hub]

先谢谢, 但是就算我没用resizeScroll() 这个方法, 还是会出现上述问题

[唐道海]

@FrontEnd-Hub 非常抱歉，无法给你更多的帮助。你提供的例子，我这里无法验证，如果你有时间希望你可以提供一份在线 demo，非常感谢！