<v-container fluid>
<v-row
class="email-block"
style="height: calc(100vh - 130px);"
>
<!-- content here -->
</v-row>
<v-row
class="map-block"
style="height: calc(100vh - 130px);"
>
<!-- content here -->
</v-row>
</v-container>
</v-main>
具有以下容器結構，兩行（每行覆寫全屏），我希望能夠在這些之間立即滾動。我試圖用 ScrollIntoView() 用 JS 來做它，但沒有正常作業。
在這個例子中可以看到類似的東西，盡管我也不能用 CSS 做到這一點。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
uj5u.com熱心網友回復：
這取決于您的設計和包裝您v-container（和您的v-app）的容器，但這個例子應該是一個好的開始：
html {
scroll-snap-type: y mandatory;
}
.row {
scroll-snap-align: start;
}
.email-block {
background-color: #456
}
.map-block {
background-color: #654
}<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container class="scroller" fluid>
<v-row class="email-block"
style="height: 100vh;">e-mail block</v-row>
<v-row class="map-block"
style="height: 100vh;">map-block</v-row>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342599.html
標籤：css Vue.js 滚动 vuetify.js