【JS】overflow内の要素で、指定したスクロール場所へ移動したい

Vue.jsで開発をしており、タイトル通りです。
数時間やっても、検討がつかず、、、

仕様

画面全体は縦幅横幅固定で、overflow: scrollでスクロールできる箇所が限定的なフロントになります。

・全体はheight 100%となっている
・overflow: scrollのみがスクロールできる

課題

1さん、2さんと記載されている箇所はposition: sticky;で固定しているため、左側の最初に表示される日付が隠れてしまいます。
以下、参考動画です。
最初に表示される日付が、上の固定された箇所に隠れており、少し下にスクロールしないと閲覧できないと思います。

試したこと

・window.scrollTo()、window.scrollBy()
→　windowの高さは固定され、overflowの箇所を操作いないといけないため、効果なし
・DOM（document.getElementById('group-' + linkDate).parentNode）を指定して、scrollToなど
→　効果なし

コード

文字数の関係で、必要そうな箇所だけ、ピックアップして記載しております。

vue
1<script>
2〜〜〜
3	export default {
4		components: {
5			TableHead,
6			TableBody,
7			Modal,
8			Datepicker
9		},
10		data: function() {
11			return {
12				ja: ja,
13			}
14		},
15		mounted: function() {
16			let linkDate = this.$store.state.basicDate.format('YYYYMMDD');
17			window.location.href = "http://localhost:8080#group-" + linkDate;
18
19		},
20		methods: {
21			
22			// カレンダー選択時
23			selectCalendar: function(date) {
24				// storeにカレンダーの値をcommitする
25				this.$store.commit('selectCalendarChange', {
26					date
27				});
28			},
29			backMonth: function() {
30				this.$store.commit('backCalendarChange');
31			},
32			nextMonth: function() {
33				this.$store.commit('nextCalendarChange');
34			},
35			scrollTop: function(){
36				window.scrollTo({
37					top: 0,
38					behavior: "smooth"
39				});
40			}
41		},
42		computed: {
43		}
44	}
45</script>
46

vue
1<template>
2	<div class="process-table-tbody">
3		<div class="process-table-tbody__inner">
4			<div class="process-table-tbody__content" v-for="(calendar, id) in calendars" :key="id" :id="'group-'+ calendar.date.replace('/', '').replace('/', '')">
5			<!-- AM -->
6			<div class="process-table-tr work-field amcolumns" v-for="(amcolumn, index) in calendar.amcolumns" :key="`first-${index}`">
7				<div class="process-table-th day"><span v-if="amcolumn.day">{{ calendar.date }}({{ calendar.week }})</span></div>
8				<div class="process-table-th time">
9					<div class="work-field__time flex__wrap f__center v__center">
10						<div class="work-field__time__inner">
11							<p>AM</p>
12							<div class="field-edit flex__wrap f__center non__column">
13								<a v-if="amcolumn.add" class="field-add field-button" @click.prevent.stop="amAddColumn(id)">追加</a>
14								<a v-if="amcolumn.remove" class="field-delete field-button" @click.prevent.stop="amRemoveColumn(id, index)">削除</a>
15							</div>
16						</div>
17					</div>
18				</div>
19				<div class="process-table-td" v-for="(manager, target) in managers" :key="target">
20					<div class="work-field__work flex__wrap f__center v__center">
21						<div class="work-field__work__inner flex__wrap f__center">
22							<a class="work-add add-button" @click.prevent.stop="openWorkModal()">架設追加</a>
23							<a class="memo-add add-button" @click.prevent.stop="openMemoModal(id, index, target, 'amcolumns')">メモ追加</a>
24						</div>
25					</div>
26				</div>
27			</div>
28			<!-- PM -->
29			<div class="process-table-tr work-field pmcolumns" v-for="(pmcolumn, index) in calendar.pmcolumns" :key="`second-${index}`">
30				<div class="process-table-th day"></div>
31				<div class="process-table-th time">
32					<div class="work-field__time flex__wrap f__center v__center">
33						<div class="work-field__time__inner">
34							<p>PM</p>
35							<div class="field-edit flex__wrap f__center non__column">
36								<a v-if="pmcolumn.add" class="field-add field-button" @click.prevent.stop="pmAddColumn(id)">追加</a>
37								<a v-if="pmcolumn.remove" class="field-delete field-button" @click="pmRemoveColumn(id, index)">削除</a>
38							</div>
39						</div>
40					</div>
41				</div>
42				<div class="process-table-td" v-for="(manager, target) in managers" :key="target">
43					<div class="work-field__work flex__wrap f__center v__center">
44						<!-- <div v-for="(memo, memoId) in calendar.pmcolumn.memos" :key="memoId">あああ</div> -->
45						<draggable group="tableContent" class="field__work__content" v-for="(memo, memoId) in calendar.memos" :key="memoId">
46							<div class="memoContent">
47								<div class="memoContent__inner">
48									{{ memos[memoId].text }}
49									<!-- <textarea :val="memos[memoId].text"></textarea> -->
50								</div>
51							</div>
52						</draggable>
53
54						<div class="work-field__work flex__wrap f__center v__center">
55							<div class="work-field__work__inner flex__wrap f__center">
56								<a class="work-add add-button" @click.prevent.stop="">架設追加</a>
57								<a class="memo-add add-button" @click.prevent.stop="openMemoModal(id, target, 'pmcolumns')">メモ追加</a>
58							</div>
59						</div>
60					</div>
61				</div>
62			</div>
63			<!-- 案件調整 -->
64			<div class="process-table-tr work-field">
65				<div class="process-table-th day"></div>
66				<div class="process-table-th time">
67					<div class="work-field__time flex__wrap f__center v__center">
68						<div class="work-field__time__inner">
69							<p>案件調整</p>
70						</div>
71					</div>
72				</div>
73				<div class="process-table-td" v-for="(manager, target) in managers" :key="target">
74					<div class="work-field__work flex__wrap f__center v__center">
75						<div class="work-field__work flex__wrap f__center v__center">
76							<div class="work-field__work__inner flex__wrap f__center">
77								<a class="work-add add-button" href="">架設追加</a>
78								<a class="memo-add add-button" href="">メモ追加</a>
79							</div>
80						</div>
81					</div>
82				</div>
83			</div>
84			</div>
85		</div>
86	</div>
87</template>
88
89<script>
90	import draggable from 'vuedraggable'
91	import dayjs from 'dayjs';
92	import 'dayjs/locale/ja';
93	dayjs.locale('ja');
94	
95	export default {
96		components: {
97			// TableColumn
98			draggable
99		},
100		filters: {},
101		data: function() {
102			return {
103				calendars: this.$store.state.listDays,
104				managers: this.$store.state.managerLists,
105				memos: this.$store.state.memos,
106			}
107		},
108		created: function() {
109			// 初期のカレンダー一覧表示
110			let basicDay = dayjs();
111			let beforeMonth = basicDay.subtract(1, 'months');
112			let afterMonth = basicDay.add(3, 'months');
113			let totalDays = afterMonth.diff(beforeMonth, 'day');
114			for(var i = 0; i < totalDays; i++) {
115				this.calendars[i] = {
116					id: i,
117					date: beforeMonth.add(i, 'day').format('YYYY/MM/DD'),
118					week: beforeMonth.add(i, 'day').format('ddd'),
119					amcolumns: [{ day: true, add: true, remove: false, works:[], memos:[] }],
120					pmcolumns: [{ add: true, remove: false, works:[], memos:[] }],
121				}
122			}
123			return this.calendars;
124		},
125		mounted: function() {
126			// 基準日が変更したタイミングで、カレンダーの日付を全て変更
127			this.$store.watch(
128				(state) => state.basicDate,() => {
129					this.calendars = this.$store.getters.getListDays;
130					this.calendars.splice();
131				}
132			);
133		},
134		beforeUpdated: function() {
135		},
136		updated: function() {
137			// 基準日が変更したタイミングを監視し、ページ内リンクを作成する
138			this.$store.watch(
139				(state) => state.basicDate,() => {
140					let linkDate = this.$store.state.basicDate.format('YYYYMMDD');
141					window.location.href = "http://localhost:8080#group-" + linkDate;
142				}
143			)
144		},
145		methods: {
146		},
147	}
148</script>

proccess.scss
1body {
2  min-height: 100vh;
3  height: 100vh;
4  overflow: hidden;
5  padding-bottom: 10px;
6}
7a {
8  cursor: pointer;
9}
10#proccess-header {
11  position: relative;
12  padding: 20px 0;
13  z-index: 100000;
14}
15.proccess-header-inner {
16  padding: 0 20px;
17}
18
19
20/*-----------------------------------------------------------------------------------------
21
22
23
24  common
25
26
27
28------------------------------------------------------------------------------------------*/
29.proccess {
30}
31.proccess__wrap {
32  padding: 0 20px;
33  height: 100%;
34}
35.proccess__wrap__inner {
36  height: 100%;
37}
38
39
40
41
42/*-----------------------------------------------------------------------------------------
43
44
45
46  main
47
48
49
50------------------------------------------------------------------------------------------*/
51
52
53
54
55.process-table {
56  position: relative;
57  width: 100%;
58  height: -webkit-calc(100vh - 88px);
59  height: calc(100vh - 88px);
60  overflow-y: scroll;
61  -webkit-overflow-scrolling: touch;
62}
63.process-table-tr {
64  display:-webkit-box;
65  display:-ms-flexbox;
66  display:flex;
67  border-bottom: 1px solid #F1F3F6;
68}
69.process-table-th.day {
70  position: sticky;
71  left: 0px;
72  z-index: 100;
73}
74.process-table-th.first,
75.process-table-th.time {
76  position: sticky;
77  left: 100px;
78  z-index: 100;
79}
80.process-table-thead {
81  position: sticky;
82  top: 0;
83  z-index: 10000;
84  padding-bottom: -50px;
85  padding-right: 20px;
86  .process-table-th {
87    width: 150px;
88    min-width: 150px;
89    height: 45px;
90    line-height: 45px;
91    border-right: 1px solid #F1F3F6;
92    text-align: center;
93    font-weight: 700;
94
95    border-bottom: 5px solid #F1F3F6;
96    &.day {
97      width: 100px;
98      min-width: 100px;
99      background: #F1F3F6;
100    }
101    &.first {
102      width: 120px;
103      min-width: 120px;
104      border-radius: 5px 0 0;
105      background: #fff;
106    }
107    &.name {
108      background: #fff;
109    }
110  }
111}
112
113.process-table-tbody {
114  position: absolute;
115  top: 47px;
116  padding-right: 20px;
117  height: 500px;
118  height: -webkit-calc(100vh - 134px);
119  height: calc(100vh - 134px);
120  .process-table-tbody__inner {
121  }
122  .process-table-tbody__content {
123  }
124  .process-table-th,
125  .process-table-td {
126    height: 150px;
127    border-right: 1px solid #F1F3F6;
128    vertical-align: bottom;
129  }
130  .process-table-th {
131    width: 120px;
132    min-width: 120px;
133    &.day {
134      width: 100px;
135      min-width: 100px;
136      font-weight: 700;
137      color: #929FB5;
138      padding-right: 10px;
139      background: #F1F3F6;
140    }
141    &:not(.day) {
142      background: #fff;
143    }
144  }
145  .process-table-td {
146    width: 150px;
147    background: #fff;
148  }
149}
150
151
152

neko_daisuki

2020/11/28 20:56

カレンダーから日付を選択したときに、現状はどのようにしてスクロールさせているのでしょうか。

退会済みユーザー

2020/11/29 00:27

ご質問、有難うございます！前提として、左側の日付一覧はdata（calendars）から参照しております。 calendars初期値は、当日から前1ヶ月、後2ヶ月の日付一覧をcalendarsに格納して、一覧を出力させております。以下、実際のプログラムです。 created: function() { // 初期のカレンダー一覧表示 let basicDay = dayjs(); let beforeMonth = basicDay.subtract(1, 'months'); let afterMonth = basicDay.add(3, 'months'); let totalDays = afterMonth.diff(beforeMonth, 'day'); for(var i = 0; i < totalDays; i++) { this.calendars[i] = { id: i, date: beforeMonth.add(i, 'day').format('YYYY/MM/DD'), week: beforeMonth.add(i, 'day').format('ddd'), amcolumns: [{ day: true, add: true, remove: false, works:[], memos:[] }], pmcolumns: [{ add: true, remove: false, works:[], memos:[] }], } } }, そして、カレンダーから日付を選択した際は、同様に、選択した日付から前1ヶ月、後2ヶ月を取得して、calendarsに格納しております。 vuexを仕様しており、以下、実際のプログラムです。 state: { basicDate: dayjs(), calendars: [], } getters: { getBasicDate: state => state.basicDate, getcalendars: (state, getters) => { let basicDay = getters.getBasicDate; let beforeMonth = basicDay.subtract(1, 'months'); let afterMonth = basicDay.add(3, 'months'); let totalDays = afterMonth.diff(beforeMonth, 'day'); for(var i = 0; i < totalDays; i++) { state.calendars[i] = { id: beforeMonth.add(i, 'day').format('YYYYMMDD'), date: beforeMonth.add(i, 'day').format('YYYY/MM/DD'), week: beforeMonth.add(i, 'day').format('ddd'), // pmの列 amcolumns: [{ day: true, add: true, remove: false, works:[{}], memos:[{}] }], // amの列 pmcolumns: [{ add: true, remove: false, works:[{}], memos:[{}] }], } } return state.calendars; }, } mutations: { selectCalendarChange(state, date) { state.basicDate = dayjs(date.date); }, }

退会済みユーザー

2020/11/29 00:27

dayjsはライブラリです。

neko_daisuki

2020/11/29 03:04

ページ内リンクでターゲットとした要素がstickyと重なる問題によく似ています。 :id="'group-'+ calendar.date.replace('/', '').replace('/', '')" としている要素に、 margin-top: -30px; padding-top: 30px; とすると変化はありませんか？

退会済みユーザー

2020/11/29 04:36

できました、、、！ <div class="process-table-tbody"> <div class="process-table-tbody__inner"> <div class="process-table-tbody__content"> 外のディレクトリ（process-table-tbody, process-table-tbody__inner）にはやってみたのですが、中の要素にやるのは意外でした、、、有難うございます！！！

行動規範の内容に同意します

回答1件

ベストアンサー

margin-top: -46px; padding-top: 46px;で解決できました、、、

上記は試していたのですが、指定する要素が間違っておりました。
以下、実際に修正したコードです。

html
1<div class="process-table-tbody">
2	<div class="process-table-tbody__inner">
3		<div class="process-table-tbody__content">
4
5.process-table-tbody__content {
6	margin-top: -46px; // headerの高さ
7	padding-top: 46px; // headerの高さ
8}
9