Garder le focus du scroll sur un élément

Bonjour,
Voila je rencontre un petit problème avec mon code.

Ce que je veux

Je souhaite créer une popup flotante qui puisse être scrollée. Seulement quand je scroll ma popup le body prend le focus est se scroll à la place.

Ce que j'ai fait
J'ai essayé toutes les solutions trouvées sur pleins de forums mais rien ne semble fonctionner.

Pour l'instant mon div scrollable contient ceci en css :

section#projet {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.02);
    overflow: auto;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
    overscroll-behavior: contain;
}

Les deux derniers étant des attributs que j'ai trouvé sur internet mais qui ne servent à rien.
Du côté du javascript j'ai quand même fait ceci :

$('body').attr('style', 'height:100%;overflow:hidden');

Ça marche sur ordinateur mais pas mobile.

Ce que j'obtiens
Une vidéo parlera mieux que milles mots : https://streamable.com/s/ykd4h/jxfigv
La première action étant ce que je souhaite, la deuxième étant le problème qui survient une fois sur deux.

Je vous remercie par avance pour le temps que vous prendrez pour m'aider !
Modifié par fvgf34 (26 Jul 2019 - 11:52)