プロが教えるわが家の防犯対策術！

html スクロール要素を下から表示したい

締切済

  • 質問者：志村うしろ
  • 質問日時：
  • 回答数：1件

overflow-y:scrollで画面からはみ出した要素があり、
最初からスクロールバーが最下部にあり、上にスクロールさせてはみ出した要素を表示させることはできますか？
よろしくお願いします。

html
<div>
<p>あああああああああああああああああああああああああ</p>
<div>

css
div {
overflow-y:scroll
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



スクリプトで、最初に下までスクロールさせておくなどといった方法ではダメでしょうか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.target{ overflow-y:scroll; height:500px; margin-top:300px; }
.target div{ height:450px; background-color:#FFD; }
.target div+div{ background-color:#FDF; }
.target div+div+div{ background-color:#DFF; }
</style>
</head>
<body>

<div class="target">
<div>first</div>
<div>second</div>
<div>third</div>
</div>

<script type="text/javascript">
let t = document.querySelector(".target");
let s = -1, h = t.clientHeight;
while(s !== t.scrollTop){ s = t.scrollTop, t.scrollTop = s + h; }
</script>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます！
すみません、補足しておけばよかったのですが、
height100%で効くようにできますでしょうか？

通報する
お礼日時：2020/06/24 09:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報