X方向のスクロールコンテナのscroll-padding-topが効かない

実現したいこと

X方向のスクロールコンテナのスクロール時、余白を設けたいです。

前提条件：
スクロールコンテナとhtml要素にscroll-behavior: smoothが効いている
祖先要素にposition: stickyとanimation-timeline: scroll()が効いている
cssでカルーセルを構成している
カルーセルは、クリップコンテナ?マスクコンテナ（.slider）、その中のスクロールコンテナ（.slides）、その中のスライド（.slide）の三段構造に分かれている
カルーセルのボタンを押すと、対応したページ内リンク（X方向）へとスクロール
カルーセルの上にはh2があり、スクロール時にそこが隠れるので何とかしたい

発生している問題・分からないこと

html {}に書いたscroll-padding-topとカルーセルのスライドに書いたネガティブなscroll-marginは効くが、他の要素は効かないです

該当のソースコード

html
1<!--- position: stickyの可動範囲 --->
2<div id="fellow-container">
3            <!--- position: stickyを持つクリップコンテナ --->
4            <section id="fellow">
5                <!--- animation-timeline: scroll()を持つ要素 --->
6                <div class="scale-container">
7                    <h2>
8                        スタッフ紹介
9                    </h2>
10                    <!--- カルーセルを二つ横並べにするコンテナ --->
11                    <div class="staff-container">
12                        <!--- カルーセルAのクリップコンテナ --->
13                        <div class="staff-info-container slider">
14                            <!--- カルーセルAのスクロールコンテナ --->
15                            <div class="staff-info-wrapper slides">
16                                <!--- カルーセルAのスライドたち --->
17                                <div class="staff-info slide" id="staff-slide-1">
18                                    <p class="roll">やくわり</p>
19                                    <p class="name">なまえ</p>
20                                    <p class="comment">
21                                        こんにちは
22                                    </p>
23                                    <a class="more-info" href="">くわしくみる</a>
24                                    <a href="#staff-slide-3" class="prev-btn caption">前に戻るボタンはここです。以後、前といいます</a>
25                                    <a href="#staff-slide-2" class="next-btn caption">次へ行くボタンはここです。以後、次といいます</a>
26                                </div>
27                                <div class="staff-info slide" id="staff-slide-2">
28                                    <p class="roll">やくわり</p>
29                                    <p class="name">なまえ</p>
30                                    <p class="comment">
31                                        こんにちは
32                                    </p>
33                                    <a class="more-info" href="">くわしくみる</a>
34                                    <a href="#staff-slide-1" class="prev-btn caption">前</a>
35                                    <a href="#staff-slide-3" class="next-btn caption">次</a>
36                                </div>
37                                <div class="staff-info slide" id="staff-slide-3">
38                                    <p class="roll">やくわり</p>
39                                    <p class="name">なまえ</p>
40                                    <p class="comment">
41                                        こんにちは
42                                    </p>
43                                    <a class="more-info" href="">くわしくみる</a>
44                                    <a href="#staff-slide-2" class="prev-btn caption">前</a>
45                                    <a href="#staff-slide-1" class="next-btn caption">次</a>
46                                </div>
47                        </div>
48                    </div>
49                </div>
50            </section>
51        </div>

css
1.slider {
2    .slides {
3        display: flex;
4        overflow: auto;
5
6        scroll-behavior: smooth;
7
8        scroll-snap-type: x mandatory;
9
10        scrollbar-width: none;
11        -ms-overflow-style: none;
12
13        &::-webkit-scrollbar {
14            display: none;
15        }
16
17        &:not(:has(div.slide:target)) {
18
19            .slide {
20                &:nth-of-type(1) {
21
22                    .prev-btn,
23                    .next-btn {
24                        display: block;
25                    }
26                }
27            }
28
29        }
30
31        .slide {
32            flex-shrink: 0;
33            scroll-snap-align: center;
34
35            &:target {
36
37                .prev-btn,
38                .next-btn {
39                    display: block;
40                }
41            }
42
43            .prev-btn,
44            .next-btn {
45                display: none;
46            }
47        }
48    }
49}
50
51#fellow-container {
52    position: relative;
53    width: 100%;
54    height: 200svh;
55    background-color: var(--white);
56
57    #fellow {
58        color: var(--white);
59        position: sticky;
60        top: 0;
61        left: 0;
62        width: 100%;
63        height: 100svh;
64        background-color: var(--white);
65        overflow: clip;
66
67        .scale-container {
68            position: relative;
69            top: 50%;
70            left: 50%;
71            width: 120%;
72            height: 120vw;
73            border-radius: 50%;
74            background-color: var(--orange);
75            /* animation-name: scaleIn3; */
76            animation-timing-function: ease-out;
77            animation-fill-mode: both;
78            animation-timeline: scroll();
79            animation-range: 180svh 250svh;
80
81            translate: -50% -50%;
82
83            h2 {
84                padding-top: 100svh;
85            }
86
87            .staff-container {
88                display: flex;
89                justify-content: center;
90                gap: 153px;
91                padding-top: 50px;
92
93                .staff-info-container {
94                    width: 608px;
95                    position: relative;
96
97                    .staff-info-wrapper {
98                        .staff-info {
99                            text-align: center;
100                            width: 608px;
101                            padding-bottom: 20px;
102
103                            .roll {
104                                font-size: 24px;
105                                font-weight: 700;
106                                padding-bottom: 22px;
107                            }
108
109                            .name,
110                            .comment {
111                                font-family: "Shirokuma";
112                                font-size: 36px;
113                                padding-bottom: 40px;
114                            }
115
116                            a {
117
118                                &.more-info {
119                                    &:hover {
120                                        background-color: var(--bright-orange);
121                                    }
122                                }
123
124                                &.prev-btn,
125                                &.next-btn {
126                                    position: absolute;
127                                    bottom: 200px;
128                                    width: 50px;
129                                    height: 50px;
130                                    background-color: var(--white);
131                                    opacity: .6;
132
133                                    &:hover {
134                                        opacity: 1;
135                                    }
136                                }
137
138                                &.prev-btn {
139                                    left: -50px;
140                                    clip-path: polygon(0 50%, 80% 0, 80% 100%);
141
142                                    &:hover {
143                                        translate: -5px -5px;
144                                    }
145                                }
146
147                                &.next-btn {
148                                    right: -50px;
149                                    clip-path: polygon(100% 50%, 20% 100%, 20% 0);
150
151                                    &:hover {
152                                        translate: 5px -5px;
153                                    }
154                                }
155                            }
156                        }
157                    }
158                }
159            }
160        }
161    }
162}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

scroll-padding-blockを使ったときに
block方向が、スクロール軸と並行な、積みあがっていくような軸で
inline方向が、スクロール軸と垂直な、少しずつ埋めていくような軸だということは分かったが
解決には至らなかった
（反対だったかもしれない）

補足

所々、要らないコードを書き換えている可能性があります
すみません　コードそれでも長いです

###追記
まだテスト中ではありますが、
.slides（スクロールコンテナ）に scroll-padding-bottom: calc((120vw - 100svh - 100px) / 2);
.slide（スライド）に　scroll-margin-top: calc((120vw - 100svh - 100px) / 2);を両方とも記述すると、画面上方向　へとスクロールする変化がありました。（記載したコードは一部なので、それだと変化がないかもしれないです）片方を抜いて数値を二倍にすると変化が起こらなくなる（上に余白100pxを空けてスクロールする）なので　どういった法則があるのか調べます

Lhankor_Mhy

2025/06/11 09:06

『html {}に書いたscroll-padding-top』というのは、ご提示のコードで言うと、どれのことですか？また、『他の要素は効かない』とは、具体的にはどのようになると考えて、どのようなコードを書いて、実際にはどのようになったのでしょうか？

Bonnacon

2025/06/11 09:52

すみません　このコードには載せてはいませんがhtml要素にcssでscroll-padding-top: 100px;を記述しています。（scroll-behavior: smooth;も）ごめんなさい。他の要素というのは、正確には他のプロパティのことです。具体的には、ページ内リンクのボタン（次のスライドへ行く）を押したときに、スクロールコンテナから上に100px空けてスクロールするのですが、この二重になったscroll-behavior: smooth;のコンテナのうち、内部のものでscroll-padding-topを追加で効かせたいということです。以下、具体的な試した例三つです。 ①htmlに書いたように、同じくスクロールする要素である.slidesにscroll-padding-topを当てれば、望んだ余白になるかもしれない　->　scroll-padding-topの分更に下にスクロールしてしまう ②コンテナに指定するのではなく、個別に指定する用のscroll-margin-topを使えば、望んだ余白が得られるかもしれないので、.slideにscroll-margin-top指定　->　変化なし ③もしかしたら、x軸にスクロールするようになった段階で、topとleftが入れ替わっているのかもしれないので、一度scroll-padding-blockを試してみよう　->　むしろ、入れ替わっているのはscroll-padding-inlineとscroll-padding-blockだと判明しかし、たいていのscroll-paddingシリーズあるいはscroll-marginシリーズは、どの要素に記述しても、変化がありませんでした

Lhankor_Mhy

2025/06/11 10:34

補足願います。 1.『ページ内リンクのボタン』とは、.prev-btn や .next-btn のことでいいですか？ 2.『スクロールコンテナから上に100px空けてスクロールする』の『スクロールコンテナ』とは、.slides のことでいいですか？ 3.『この二重になったscroll-behavior: smooth;のコンテナのうち、内部のもの』とは、どれのことでしょう？　ご提示のコードですと、scroll-behavior: smooth; が指定してある要素は、.slides だけのように見えます。二重とはどういう意味でしょうか？

Bonnacon

2025/06/12 01:04

ありがとうございます 1.　合っています 2.　はい、.slidesのことです 3.　隔たりはありますが、二重になっています。なぜなら、html（つまりは外側）にもscroll-behavior: smoothがかかっているからです。以下、htmlにかかっているCSSです ```css html { --white: #fff; --charcoal: #333; --bright-orange: #C65F1E; --orange: #F4993E; --pale-orange: #F6E5DB; color: var(--charcoal); font-family: "Noto Sans JP"; font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 100px; } ```

Lhankor_Mhy

2025/06/12 01:21 編集

ああ、提示はされていないけれど、html に scroll-behavior: smooth を当てているのですね。ということは、3 は、2 と同じということでいいですよね。整理すると、・提示されているコードに、.slides{scroll-padding-top:100px}を追加・.slidesと.slideの間の上部に100pxの余白ができると期待・しかし、余白はなかったということでいいでしょうか？

Bonnacon

2025/06/12 01:36

少しだけ違いますスクロールコンテナとビューポートの間にhtmlのscroll-padding-top: 100px;と.slidesのscroll-padding-top: 300px;を合わせた分(400px)だけ空くと思っていたのですが、空いたのは100pxだけでした。すみません、伝え忘れていたのですが、ここに書いた情報の他に、main内にヘッダー代わりのposition: sticky;を持つ要素もあります。ですが多分今回は関係ないです。『3 は、2 と同じ』という言葉の３が　3.『この二重になったscroll-behavior: smooth;のコンテナのうち、内部のもの　③もしかしたら、x軸にスクロールするようになった段階で、の、どちらかは分からないですが、③だとするなら、結果は同じです。（値を大きくしたなら、結果は違うと思いますが、おそらく望んでいた効果は出ないでしょう）度々分かりにくくてすみません

Lhankor_Mhy

2025/06/12 01:57

『スクロールコンテナとビューポートの間にhtmlのscroll-padding-top: 100px;と.slidesのscroll-padding-top: 300px;を合わせた分(400px)だけ空く』とのことですが、ここでいう『スクロールコンテナ』は .slides のことでいいですよね？つまり、ファーストビュー（スクロールが上端である状態）で .slides がビューポート上端から400px空いていることを期待している、ということでいいでしょうか？　ご提示いただいていない部分で、 .slides に対するアンカーなどがあるということでしょうか？

Bonnacon

2025/06/12 02:25

はい　ここで言うスクロールコンテナは .slidesです『つまり、ファーストビュー（スクロールが上端である状態）で .slides がビューポート上端から400px空いていることを期待している、ということでいいでしょうか？』ご覧いただいたコードは一部ではありますが、その中での正解はそういうことになります『ご提示いただいていない部分で、 .slides に対するアンカーなどがあるということでしょうか？』提示していない部分での.slidesへのアンカーはありませんが、その外側の#followに対するアンカーはあります

Bonnacon

2025/06/12 02:36

追記いたしました

Lhankor_Mhy

2025/06/12 02:40 編集

.slides{ scroll-padding-top: 300px; } とすると、.slides であるスクロールコンテナにおけるパディング、つまり、.slides の内側に効く、というのはご理解されていますか？　もしご理解されているのであれば、それが .slides の上端余白に影響すると考えてらっしゃる理由を教えていただけますか？

Bonnacon

2025/06/12 02:47

なるほどいいえ、深く理解していませんでした html要素にCSSで書いた時の挙動から、名前はpaddingだがmarginのような性質を持つと勘違いしておりました確かに、scroll-padding-topはスクロール時、html要素のpadding-topを空けスクロールすると考えると納得がいきます

Lhankor_Mhy

2025/06/12 03:44

お返事ありがとうございます。お手伝いできることがあればお知らせください。

Bonnacon

2025/06/12 03:54

長々とお時間をいただきました分かりやすい回答をありがとうございますこんなにしてもらってベストアンサーにしないのは申し訳ないので、 stickyを持っている要素が内包するのCSSカルーセルがずれる問題は、JSで解決するしかない旨を、ベストアンサーにしますので述べてください（具体的な方法は、書いても書かなくても構いません）本当にありがとうございました

Lhankor_Mhy

2025/06/12 06:29

ご解決されて何よりです。お手数をおかけしますが、自己解決でご対応いただければ幸いです。

Bonnacon

2025/06/12 07:02

すみません　試してみたところJSではうまくいかないことが分かり、ノーマルのpaddingを調整する方法を取ることにしました