【发布时间】：2021-12-07 20:14:29
【问题描述】：
我试图理解为什么当我使表格行可见或不可见时，页面会从顶部重新呈现。窗口自动滚动回顶部。因此，我必须向下滚动到组件。
我使用的是 Vue 2.6.12。在 Google Chrome 上进行测试，但同样的问题也出现在 Firefox 中。
下面的模板展示了我正在使用的元素。
toggleScorecardVisibility() 函数将切换记分卡的可见状态。
根据下面的 sn-p，表格行将变得可见：
<tr v-show="scorecard.visible" class='border mb-2'>
每当记分卡可见状态发生变化时，窗口就会返回到页面顶部。
我尝试了很多方法，包括禁用 window.onscroll，但我尝试过的任何方法似乎都无法阻止这种行为。我还尝试使用 scrollTo 函数定位元素（vue $ref）。
有没有办法防止窗口滚动回页面顶部并保持专注于刚刚暴露的 TR 元素？
任何指针都有帮助。
<template v-for="scorecard in paginatedList">
<tr v-bind:key="scorecard.id" :ref="'ref-scorecard-'+scorecard.id">
<td class="position-relative">
<player :assignedPlayer="scorecard" :options="{'showIndex': 2, 'showRole': false, 'nameFormat': 3, 'sub_on_new_line': 1, 'detail': 1}" />
</td>
<td class='text-center align-middle'>{{scorecard.player.flight}}</td>
<td class='text-center align-middle'>{{scorecard.gtotal}}</td>
<td class='text-center align-middle'>{{scorecard.ntotal}}</td>
<td class='text-center align-middle'>{{scorecard.ptotal}}</td>
<td class='text-center align-middle'>{{scorecard.points_adjustment}}</td>
<td class='text-center align-middle'>{{getSkins(scorecard)}}</td>
<td class='text-center'>
<div>
<a @click="toggleScorecardVisibility(scorecard.id)" class="btn btn-sm btn-icon btn-transparent-dark text-gray-500 m-0" href="#" role="button" :id="'scorecard_' + scorecard.id" data-toggle="tooltip" title="Scorecard Details" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
</a>
<a @click="onShowRebuildScorecardConfirmationModel(scorecard.id)" class="btn btn-sm btn-icon text-red m-0" href="#" role="button" data-toggle="tooltip" title="Reset Scorecard" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline>
<polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</svg>
</a>
</div>
</td>
</tr>
<transition name='fade' :key='-scorecard.id'>
<tr v-show="scorecard.visible" class='border mb-2'>
<td colspan='8'>
<scorecard
:scorecardId="scorecard.id"
:numberOfHoles="store.event_plan.play_length == 0 ? 9 : 18"
:scorecard="scorecard"
:course="store.course.tees[scorecard.tee.id]"
@scorecard-updated="scorecardUpdated"
@scorecards-updated="scorecardsUpdated"
/>
</td>
</tr>
</transition>
</template>
【问题讨论】：
-
回到这个。我想知道是否有人有任何想法。对行的可见状态进行简单更改时，它会滚动到屏幕顶部，这似乎很奇怪。
标签： javascript dom vuejs2 vue-component