scroll to end of browser on new view opened
This commit is contained in:
parent
0a090c9097
commit
bcbfb347d6
1 changed files with 24 additions and 5 deletions
|
@ -1,6 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="browser">
|
<div class="browser" ref="root">
|
||||||
<div class="view" v-for="(address, idx) in addresses" :key="address">
|
<div
|
||||||
|
class="view"
|
||||||
|
v-for="(address, idx) in addresses"
|
||||||
|
:key="address"
|
||||||
|
:data-address="address"
|
||||||
|
>
|
||||||
<header :class="{ disabled: addresses.length === 1 }">
|
<header :class="{ disabled: addresses.length === 1 }">
|
||||||
<sl-icon-button
|
<sl-icon-button
|
||||||
class="this-button"
|
class="this-button"
|
||||||
|
@ -33,10 +38,19 @@ export default defineComponent({
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: () => {
|
watch: {
|
||||||
return {};
|
addresses(addresses: string[], prevAddresses: string[]) {
|
||||||
|
const root = this.$refs.root as HTMLDivElement;
|
||||||
|
if (addresses.length > prevAddresses.length) {
|
||||||
|
this.$nextTick().then(() => {
|
||||||
|
root.scrollTo({
|
||||||
|
left: root.scrollWidth,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
setup(props) {},
|
|
||||||
methods: {
|
methods: {
|
||||||
visit(idx: number) {
|
visit(idx: number) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
|
@ -57,7 +71,12 @@ export default defineComponent({
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.browser {
|
.browser {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
margin-left: -2rem;
|
||||||
|
margin-right: -2rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue