Faire en sorte que la zone d'édition suive le scroll

a marqué ce sujet comme résolu.
Auteur du sujet

Salut,

En train d’éditer un tutoriel dont l’aperçu d’une section dépasse de mon écran, je suis obligé de scroller vers le bas après après pressé "Aperçu" puis de scroller à nouveau vers le haut pour corriger une erreur, puis de scroller vers le bas pour reprendre ma lecture, puis… C’est assez laborieux.

Il me semble qu’il avait été mentionné une zone d’édition verticale dans le futur (édition à gauche, aperçu à droite) et ça devrait aider, mais en attendant il est possible de simplifier la vie des auteurs en fixant la zone d’édition (au sens CSS du terme), c’est-à-dire en la faisant suivre le scroll.

Merci. :)

Édité par Vayel

+2 -0

Tu peux utiliser ça dans la console web :

const $div = $('#div_id_text'),
      $controls = $div.children('.controls');

$div.find('.markdown-help').remove();

$(window).on('scroll', () => {
    if ($div.offset().top - 10 < $(window).scrollTop()) {
        $div.next().css('margin-top', $controls.height() + 'px');
        $controls.css({
            background: '#f0f0f0',
            position: 'fixed',
            width: $controls.innerWidth() + 'px',
            top: 10 + 'px',
            'z-index': 1000
        });
    } else {
        $div.next().css('margin-top', 0 + 'px');
        $controls.removeAttr('style');
    }
});

EDIT : Pour les pages : https://zestedesavoir.com/contenus/editer-section/*/*

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte