【OnsenUI】ios リストを一番上か下までスクロールしたときのバウンスを無効にしたい

実現させたいこと

ons-pageのなかにあるons-listをスクロールしたときのバウンス効果を無効にしたいです
iosというより、onsenUIの仕様なのかなと予想しているのですが、原因がいまいち分からず質問させていただきました。ご回答よろしくお願いいたします。

概要

ios 6.2.0
Cordova 10.0.0
OnsenUI 2.10.10
プラットフォーム : Monaca テンプレート : OnsenUI V2 JS Tabbar

Code

HTML
1<ons-page>
2    <ons-toolbar>
3      <div class="center" id="toolbar-title"></div>
4    </ons-toolbar>
5    <ons-tabbar position="auto">
6      <ons-tab label="Tab 1" page="tab1.html" active>
7      </ons-tab>
8      <ons-tab label="Tab 2" page="tab2.html">
9      </ons-tab>
10      <ons-tab label="Tab 3" page="tab3.html">
11      </ons-tab>
12    </ons-tabbar>
13  </ons-page>
14
15  <!--以下略-->
16
17  <ons-template id="tab2.html">
18    <ons-page id="second-page">
19      <div style="background-color: red; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
20      <div style="background-color: greenyellow; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
21      <div style="background-color: gold; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
22      <div style="background-color: deepskyblue; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
23      <div style="background-color: red; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
24      <div style="background-color: greenyellow; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
25      <div style="background-color: gold; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
26      <div style="background-color: deepskyblue; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
27      <div style="background-color: red; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
28      <div style="background-color: greenyellow; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
29      <div style="background-color: gold; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
30      <div style="background-color: deepskyblue; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
31      <div style="background-color: red; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
32      <div style="background-color: greenyellow; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
33      <div style="background-color: gold; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
34      <div style="background-color: deepskyblue; width: 100%; height: 100px; margin: 10px 0; text-align: center; padding: 10px 0;">hello</div>
35    </ons-page>
36  </ons-template>

追記

画像が荒くて申し訳ありません。page__contentのcss記述です！

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

回答1件

こちらで解決しますか？
overscroll-behavior - CSS: カスケーディングスタイルシート | MDN

投稿2021/12/20 08:48

Lhankor_Mhy

総合スコア36104

todayyy

2021/12/20 08:59

ons-page, page__contentクラスにやってみましたが、変化ありませんでした。。。

Lhankor_Mhy

2021/12/20 09:01

OnsenUIは全くわからないですが、スクロールしてるのは body なんじゃないですか？

todayyy

2021/12/20 09:19

返信ありがとうございます！bodyに指定しても変化ありませんでした。。。プログラミング初心者なので、間違ってるかもしれませんが、OnsenUIのons-pageはbodyの中にhtmlファイルを表示しているようなイメージだと思います！

Lhankor_Mhy

2021/12/21 00:46 編集

https://ja.onsen.io/v2/api/angular2/ons-page.html ↑このページだと、スクロールしているのは .content.page__content のようですね。Devtools で詳細を確認してみてはどうですか？

todayyy

2021/12/27 12:41

ご連絡遅れて申し訳ありません???? 確認してみたところ、page__contentの中にover-flowがautoになってるのでそこをhiddenに変更されていることを確認できても、バウンスしてしまいますね。。。Lhankorさんには申し訳ないですけど、バウンスを止めることはあきらめることします。いろいろとアドバイスありがとうございました！

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