Empêcher la div de défiler vers le haut lorsqu'elle est heurtée par la div située en dessous ?

Question

Empêcher la div de défiler vers le haut lorsqu'elle est heurtée par la div située en dessous ?

Demandé el 4 de Janvier, 2020: Quand la question a-t-elle été
517 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai demandé une question similaire hier mais je l'ai mal expliqué et je n'ai pas précisé mon souhait d'une solution purement CSS, ce qui devrait être possible, je pense, donc je réessaie.

En gros, j'ai un problème où j'ai un div de messages défilants et un champ de saisie en dessous. Lorsque je clique sur un bouton, j'aimerais que le champ de saisie soit remonté de 100 pixels, sans que la division de messages ne défile également.

Voici un violon qui démontre le problème dans son intégralité

Comme vous pouvez le voir, lorsque vous cliquez sur le bouton "Ajouter une marge", la section des messages défile également vers le haut. Je voudrais qu'elle reste là où elle était. De même, si vous faites légèrement défiler la page vers le haut de sorte que vous ne pouvez voir que l'avant-dernier message, le fait de cliquer sur le bouton devrait également permettre de conserver cette position.

Ce qui est intéressant, c'est que ce comportement est "parfois" préservé. Par exemple, dans certaines circonstances (que je ne peux pas vraiment déduire), la position du défilement est conservée. J'aimerais simplement qu'il se comporte ainsi de manière cohérente.

window.onload = function(e) {
  document.querySelector(".messages").scrollTop = 10000;
};

function test() {
  document.querySelector(".send-message").classList.toggle("some-margin");
}

.container {
     width: 400px;
     height: 300px;
     border: 1px solid #333;
     display: flex;
     flex-direction: column;
}
 .messages {
     overflow-y: auto;
     height: 100%;
}
 .send-message {
     width: 100%;
     display: flex;
     flex-direction: column;
}
 .some-margin {
     margin-bottom: 100px;
}

<div class="container">
   <div class="messages">
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
   </div>
   <div class="send-message">
      <input />
   </div>
</div>
<button onclick="test()">add margin</button>

Demandé el 4 de Janvier, 2020 par Ryan Peschel

Answer 1

5 Réponses

Answer 2

5voto

Basil Points 1472

Voici une solution amusante qui pourrait vous plaire.

Ce que nous savons de la division, c'est qu'elle ne préserve que la position supérieure de la barre de défilement. Ainsi, si la hauteur change pour une raison quelconque, la barre de défilement restera la même et c'est ce qui cause votre problème.

Comme solution de rechange, vous pouvez inverser le .messages Utilisation à 180 degrés transform: rotate(180deg) scaleX(-1); et retourner le .message pour annuler le retournement du contenu, le div maintiendra automatiquement la barre de défilement inférieure (qui est en haut).

function test() {
  document.querySelector(".send-message").classList.toggle("some-margin")
}

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
  transform: rotate(180deg) scaleX(-1);
}

.message
{
  transform: rotate(180deg) scaleX(-1);
}
.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.some-margin {
  margin-bottom: 100px;
}

<div class="container">
  <div class="messages">
  <div class="message">hello1</div>
  <div class="message">hello2</div>
  <div class="message">hello3</div>
  <div class="message">hello4</div>
  <div class="message">hello5</div>
  <div class="message">hello6</div>
  <div class="message">hello7</div>
  <div class="message">hello8</div>
  <div class="message">hello9</div>
  <div class="message">hello10</div>
  <div class="message">hello11</div>
  <div class="message">hello12</div>
  <div class="message">hello13</div>
  <div class="message">hello14</div>
  <div class="message">hello15</div>
  <div class="message">hello16</div>
  <div class="message">hello17</div>
  <div class="message">hello18</div>
  <div class="message">hello19</div>
  <div class="message">hello20</div>
  </div>
  <div class="send-message">
  <input />
  </div>
</div>

<button onclick="test()">add margin</button>

Répondu el 7 de Janvier, 2020 par Basil (1472 Points )

Answer 3

3voto

Basil Points 1472

Le comportement normal de la barre de défilement est d'être en haut, donc lorsque vous la mettez en bas au chargement de la page, vous devez la maintenir vous-même parce que lorsque le contenu inférieur la pousse, la barre de défilement se déplace vers le haut.

J'ai donc deux solutions à vous proposer :

Inversez les messages à l'intérieur de la division Messages afin que le dernier message soit le premier et que le défilement soit toujours en haut.
J'ai créé une fonction javascript pour faire défiler le bas de n'importe quel élément. Il suffit donc de l'appeler quand on veut faire défiler le bas.

function scrollbottom(e) { e.scrollTop = e.clientHeight; }

Vérifiez l'extrait

var elem = document.querySelector(".messages");

window.onload = function(e){ 
  scrollbottom(elem);
}

function test() {
  document.querySelector(".send-message").classList.toggle("some-margin");
  scrollbottom(elem);
}

function scrollbottom(e)
{
  e.scrollTop = e.clientHeight;
}

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.some-margin {
  margin-bottom: 100px;
}

<div class="container">
  <div class="messages">
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  <div class="message">hello</div>
  </div>
  <div class="send-message">
  <input />
  </div>
</div>

<button onclick="test()">add margin</button>

Répondu el 6 de Janvier, 2020 par Basil (1472 Points )

Answer 4

3voto

Basil Points 1472

Vous pouvez le faire dans l'autre sens, en donnant la hauteur à l'élément .messages au lieu de le donner à la .container dans ce cas, cela n'affectera pas les messages div mais si vous le donnez à la .container il va pousser votre div parce que la marge est à l'intérieur de la div principale qui a une hauteur.

Regardez cet extrait

function test() {
  document.querySelector(".send-message").classList.toggle("some-margin");
}

.container {
  width: 400px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  height: 300px;
  overflow-y: auto;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.some-margin {
  margin-bottom: 50px;
}

<div class="container">
  <div class="messages">
  <div class="message">hello1</div>
  <div class="message">hello2</div>
  <div class="message">hello3</div>
  <div class="message">hello4</div>
  <div class="message">hello5</div>
  <div class="message">hello6</div>
  <div class="message">hello7</div>
  <div class="message">hello8</div>
  <div class="message">hello9</div>
  <div class="message">hello10</div>
  <div class="message">hello11</div>
  <div class="message">hello12</div>
  <div class="message">hello13</div>
  <div class="message">hello14</div>
  <div class="message">hello15</div>
  <div class="message">hello16</div>
  <div class="message">hello17</div>
  <div class="message">hello18</div>
  <div class="message">hello19</div>
  <div class="message">hello20</div>
  </div>
  <div class="send-message">
  <input />
  </div>
</div>

<button onclick="test()">add margin</button>

Répondu el 7 de Janvier, 2020 par Basil (1472 Points )

Answer 5

2voto

User863 Points 6834

La solution de contournement la plus simple consiste à définir la valeur précédente de l'option scrollTop sur la bascule. Ici, j'utilise jeu de données pour stocker les données précédentes scrollTop vous pouvez utiliser la variable soit.

window.onload = function(e) {
  document.querySelector(".messages").scrollTop = 10000;
}

function test() {
  let state = document.querySelector(".send-message").classList.toggle("some-margin")
  let div = document.querySelector(".messages");

  if (state) {
    div.dataset.top = div.scrollTop;
    div.scrollTop += 100 // same as margin-bottom of .some-margin
  } else {
    div.scrollTop = div.dataset.top;
  }
}

.container {
  width: 400px;
  height: 300px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.messages {
  overflow-y: auto;
  height: 100%;
}

.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.some-margin {
  margin-bottom: 100px;
}

<div class="container">
  <div class="messages">
    <div class="message">hello1</div>
    <div class="message">hello2</div>
    <div class="message">hello3</div>
    <div class="message">hello4</div>
    <div class="message">hello5</div>
    <div class="message">hello6</div>
    <div class="message">hello7</div>
    <div class="message">hello8</div>
    <div class="message">hello9</div>
    <div class="message">hello10</div>
    <div class="message">hello11</div>
    <div class="message">hello12</div>
    <div class="message">hello13</div>
    <div class="message">hello14</div>
    <div class="message">hello15</div>
    <div class="message">hello16</div>
    <div class="message">hello17</div>
    <div class="message">hello18</div>
    <div class="message">hello19</div>
    <div class="message">hello20</div>
  </div>
  <div class="send-message">
    <input />
  </div>
</div>

<button onclick="test()">add margin</button>

Répondu el 8 de Janvier, 2020 par User863 (6834 Points )

Answer 6

0voto

Shannaki Points 76

Il semble y avoir un problème avec la fonction js toggle. Je l'ai remplacée par une simple fonction de masquage et d'affichage. J'ai également ajouté une largeur sur la balise input. Vous devez également ajouter une position : absolute sur le div send-message et bottom : 0 pour qu'il reste en bas. Ensuite, placez position : relative sur le conteneur pour que le div send-message reste à l'intérieur du conteneur. Cela signifie que le conteneur de messages n'affectera pas les messages eux-mêmes et ne les poussera pas vers le haut.

window.onload = function(e) {
  document.querySelector(".messages").scrollTop = 10000;
};

function test() {
  var x = document.querySelector(".send-message");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
     width: 400px;
     height: 300px;
     border: 1px solid #333;
     display: flex;
     flex-direction: column;
     position: relative;
}
 .messages {
     overflow-y: auto;
     height: 100%;
}
 .send-message {
     width: 100%;
     display: flex;
     flex-direction: column;
     position: absolute;
     bottom: 0;
}
 .send-message input {
     width:100%;
}
 .some-margin {
     margin-bottom: 100px;
}

<div class="container">
   <div class="messages">
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">test</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
      <div class="message">hello</div>
   </div>
   <div class="send-message">
      <input />
   </div>
</div>
<button onclick="test()">add margin</button>

Répondu el 9 de Janvier, 2020 par Shannaki (76 Points )

Empêcher la div de défiler vers le haut lorsqu'elle est heurtée par la div située en dessous ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Empêcher la div de défiler vers le haut lorsqu'elle est heurtée par la div située en dessous ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: