cssを用いた要素の隠し方

Question

前提・実現したいこと

webページを開くと、
6秒間gifが流れる。
アニメーション再生中もスクロールしてしまえば、下にある要素が見えてしまうので
それを隠す機能を実装中に以下のエラーメッセージが発生しました。

発生している問題

ｃｓｓ等で試みるも、表示されてしいます。

該当のソースコード

<div>Loading</div>
<img id="anime" src="http://cfabond.starfree.jp/loading.gif">
<hr>

<script>
let anm = document.querySelector("#anime");
anm.addEventListener("load",function(evt){
    let target = evt.currentTarget;
    setTimeout(function(){
        target.parentElement.removeChild(target);
    },6000);
});
</script>

試したこと

http://smile-design.bz/news_blog/2016/03/05/anai024/
このサイトを参考にしてｃｓｓ等を用いて実験を行いましたが、
どうしても表示されてしまいました。
css以外を用いた隠す方法でも構いませんので、
教えていただけませんか？

Comments

[m.ts10806]

＞それを隠す機能を実装中に以下のエラーメッセージが発生しました。

質問内のどこに書きました？

[siruku6]

＞下にある要素が見えてしまう
ということなのですが、その隠したい（表示されてしまう）要素も記載していただけると...

もちろん m.ts10806さんが指摘される通り、エラーメッセージも掲載していただかないと回答がしにくいと思います。

[mari.rinn]

機能を隠す　ではなく、6秒間スクロール出来なくする　ではダメなのですか？

[mitsu-wan]

他の方も指摘されていますが、メッセージが記載されていません

>ｃｓｓ等を用いて実験を行いましたが
何を試し、どううまくいかなかったのですか？
とりあえず、こうすればうまくいくと思っているはずのコードと、
実際にどううまくいかないのかを記載してください。

Answer 1

• スクロールをとめるか
• ダミーで一枚divを入れて透けさせないようにする