在Vue中，我們可以通過使用Vue.js的一個插件 -- vue-video-player來實現視頻字幕的滾動效果。只需要簡單的幾步即可完成字幕的添加與展示。

首先，我們需要安裝vue-video-player插件。在控制臺中輸入以下命令：

npm install vue-video-player --save

安裝完成后，我們需要在Vue的main.js文件中添加以下代碼：

// 引入視頻播放器插件
import VueVideoPlayer from 'vue-video-player'
// 引入視頻播放器樣式文件
import 'video.js/dist/video-js.css'
// 引入字幕文件
import 'videojs-contrib-hls/dist/videojs-contrib-hls.js'
// 引入字幕文件樣式
import 'videojs-contrib-hls/dist/videojs-contrib-hls.css'
// 注冊全局組件，組件名稱為VueVideoPlayer
Vue.use(VueVideoPlayer)

接著，在Vue的模板代碼中添加以下代碼：

<template>
<div>
<video-player ref="videoPlayer" v-bind:options="playerOptions"></video-player>
</div>
</template>

以上代碼中，通過Vue的<video-player>標簽創建了一個視頻播放器實例，這個實例中包含了我們需要播放的視頻文件及字幕文件。

接下來，在Vue的script腳本中添加以下代碼：

<script>
export default {
name: 'VideoPlayer',
data() {
return {
playerOptions: {
controls: true,
autoplay: false,
sources: [{
src: 'http://vm3.dashif.org/livesim-dev/testpic_2s/Manifest.mpd',
type: 'application/dash+xml'
}],
tracks: [{
kind: 'subtitles',
src: 'http://www.storiesinflight.com/js_videosub/jellies.srt',
srclang: 'en',
label: 'English',
default: true
}]
}
}
},
mounted() {
var that = this;
this.$nextTick(async function() {
var videoElement = that.$refs.videoPlayer.videoElement;
await videoElement.play();
})
}
}
</script>

在以上代碼中，我們通過Vue.js的data函數定義了playerOptions，包含了視頻文件及字幕文件的地址等信息。在mounted函數中，通過之前創建的<video-player>實例的$refs.videoPlayer獲取到了video.js的播放器對象，然后通過調用play()方法來播放視頻文件。這樣就完成了字幕的添加與播放。

通過以上步驟，我們就成功實現了Vue.js中視頻字幕的滾動效果。如果需要實現更多的功能，可以在<video-player>標簽中添加其他屬性及方法。