ป้องกันการเลื่อนขึ้น div เมื่อชนด้านล่างโดย div หรือไม่

10

ฉันถามคำถามที่คล้ายกันเมื่อวานนี้ แต่อธิบายได้ไม่ดีและไม่ได้ระบุความต้องการของฉันสำหรับโซลูชัน CSS บริสุทธิ์ซึ่งฉันคิดว่าควรจะเป็นไปได้ดังนั้นฉันจึงลองอีกครั้ง

โดยทั่วไปฉันมีปัญหาที่ฉันมี div ของข้อความที่เลื่อนได้และฟิลด์อินพุตด้านล่าง เมื่อฉันคลิกปุ่มฉันต้องการให้ฟิลด์อินพุตมีการชนกันที่ 100 พิกเซลโดยไม่ต้องเลื่อน div ของข้อความด้วย

นี่คือซอที่แสดงให้เห็นถึงปัญหาอย่างครบถ้วน

อย่างที่คุณเห็นเมื่อคุณคลิกปุ่ม "เพิ่มระยะขอบ" ข้อความ div จะเลื่อนขึ้นเช่นกัน ฉันอยากให้มันอยู่ตรงไหน ในทำนองเดียวกันหากคุณเลื่อนขึ้นเล็กน้อยเพื่อให้คุณเห็นข้อความที่สองถึงข้อความสุดท้ายเท่านั้นการคลิกที่ปุ่มควรจะรักษาตำแหน่งนั้นไว้ในทำนองเดียวกันเมื่อคลิก

สิ่งที่น่าสนใจคือพฤติกรรมนี้ "บางครั้ง" เก็บรักษาไว้ ตัวอย่างเช่นในบางสถานการณ์ (ซึ่งฉันไม่สามารถอนุมานได้มาก) ตำแหน่งการเลื่อนจะยังคงอยู่ ฉันแค่อยากให้มันประพฤติอย่างสม่ำเสมอ

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>

ขยายตัวอย่างข้อมูล

— Ryan Peschel
แหล่งที่มา

1

สวัสดีอีกครั้งฉันเป็นคนที่ตอบคำถามของคุณโดยใช้ JS ฉันต้องการแจ้งให้คุณทราบเกี่ยวกับสิ่งที่คุณอาจตีความผิด ที่คุณกล่าวถึง: ข้อความ div เลื่อนขึ้นเช่นกัน ที่จริงแล้วมันไม่ใช่สิ่งdivที่เลื่อนขึ้นมันเป็นความสูงของ div ที่ลดลง เหตุใดจึงเป็นเช่นนี้ ความหมายก็scrollbarคือว่าไม่ได้ปรับตำแหน่งของมัน แถบเลื่อนจะจดจำตำแหน่งที่สัมพันธ์กันจากด้านบนของคอนเทนเนอร์เท่านั้น เมื่อความสูงของ div ลดลงดูเหมือนว่าแถบเลื่อนกำลังเลื่อนขึ้น แต่จริงๆแล้วไม่ใช่

— ริชาร์ด

1

โพสต์ของคุณทำให้รู้สึกสมบูรณ์แบบ (ในแง่ที่คนรู้ว่าผลลัพธ์ที่คุณต้องการ) แต่ฉันแค่แบ่งปันบางสิ่งในกรณีที่ความรู้ไม่ปรากฏแก่คุณ (ในกรณีที่อาจช่วยให้คุณคิดวิธีแก้ปัญหา ปัญหาดังกล่าว) ;-)

— Richard

ใช่จริงมากขอบคุณสำหรับการชี้แจง มีเพียง "ดูเหมือน" เท่านั้นที่เลื่อนขึ้นเนื่องจากคุณไม่สามารถดูเนื้อหาที่ต่ำกว่าที่คุณเคยทำได้ ในความเป็นจริงตำแหน่งการเลื่อนจะไม่เปลี่ยนแปลง ภาพลวงตาเล็กน้อย ใช่นั่นอาจช่วยแก้ปัญหาได้

— Ryan Peschel

5

นี่เป็นทางออกที่ตลกที่คุณอาจชอบ

สิ่งที่เรารู้เกี่ยวกับ div นั้นจะรักษาตำแหน่งสูงสุดของแถบเลื่อนเท่านั้นดังนั้นหากความสูงเปลี่ยนไปเนื่องจากสาเหตุใด ๆ แถบเลื่อนจะยังคงเหมือนเดิมและนี่คือสาเหตุของปัญหาของคุณ

คุณสามารถพลิก.messages180 องศาโดยใช้transform: rotate(180deg) scaleX(-1);และพลิกกลับ.messageเพื่อยกเลิกการพลิกเนื้อหาจากนั้น div จะรักษาแถบเลื่อนด้านล่าง (ซึ่งอยู่ด้านบน) โดยอัตโนมัติ

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>

ขยายตัวอย่างข้อมูล

— โหระพา
แหล่งที่มา

นี่เป็นปัญหาที่การเลื่อนเมาส์วีลไปทางด้านหลัง (การเลื่อนขึ้นลงและเลื่อนลงขึ้นไป)

— Ryan Peschel

โอเคฉันใช้เวลามากกับเรื่องนี้ แต่ตอนนี้ยังมีนักพัฒนาคนอื่น ๆ ที่มี 3 คำตอบที่คุณไม่ได้มองหา :) ฉันหวังว่าจะช่วยให้คุณโชคดี แต่ในฐานะที่เป็นคำแนะนำให้โหวตว่าใครใช้เวลาพยายามตอบคำถามของคุณคุณจะไม่ถูกเรียกเก็บเงินจากการทำเช่นนั้น

— บาซิล

2

แน่นอนค่ะ ขอบคุณอีกครั้ง

— Ryan Peschel

นี่เป็นสิ่งที่ฉลาดมาก ;-) แต่น่าเสียดายที่การเลื่อนกลับด้านนั้นค่อนข้างทำให้ไม่สามารถวางได้

— ริชาร์ด

3

พฤติกรรมปกติของแถบเลื่อนที่จะอยู่ด้านบนดังนั้นเมื่อคุณตั้งค่าไว้ที่ด้านล่างของการโหลดหน้าคุณจะต้องรักษามันไว้ด้วยตัวคุณเองเพราะเมื่อเนื้อหาด้านล่างผลักไปด้านบนแล้ว div เลื่อนจะเลื่อนไปด้านบน

ดังนั้นฉันมีสองวิธีแก้ปัญหาสำหรับคุณ:

ย้อนกลับข้อความภายใน div ข้อความเพื่อให้ข้อความสุดท้ายเป็นข้อความแรกดังนั้นการเลื่อนจะอยู่ด้านบนเสมอ
ฉันสร้างฟังก์ชั่นจาวาสคริปต์เพื่อเลื่อนไปที่ด้านล่างขององค์ประกอบใด ๆ ดังนั้นคุณจะเรียกมันว่าเมื่อใดก็ตามที่คุณต้องการเลื่อนไปที่ด้านล่าง

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

ตรวจสอบตัวอย่าง

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>

ขยายตัวอย่างข้อมูล

— โหระพา
แหล่งที่มา

น่าเสียดายที่ฉันไม่ต้องการเลื่อนเพื่อเลื่อนไปที่ด้านล่าง ฉันต้องการรักษาตำแหน่งของมัน นอกจากนี้ยังมีโอกาสที่จะทำได้โดยไม่ต้องใช้ Javascript จาก OP: "ในทำนองเดียวกันหากคุณเลื่อนขึ้นเล็กน้อยเพื่อให้คุณเห็นเฉพาะข้อความที่สองถึงข้อความสุดท้ายการคลิกที่ปุ่มควรจะรักษาตำแหน่งนั้นเมื่อคลิกเหมือนกัน"

— Ryan Peschel

3

คุณสามารถทำมันด้วยวิธีอื่น ๆ โดยให้ความสูงกับ.messages แทนที่จะให้มัน.containerในกรณีนี้มันจะไม่ส่งผลกระทบต่อข้อความdivแต่ถ้าคุณให้มันกับ.containerมันจะผลัก div ของคุณเพราะขอบอยู่ภายในหลัก div ซึ่งมีความสูง

ตรวจสอบตัวอย่างนี้

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>

ขยายตัวอย่างข้อมูล

— โหระพา
แหล่งที่มา

.send-messageนี้ไม่ได้ทำงานเพราะความต้องการของอัตรากำไรขั้นต้นที่จะนำไปใช้กับ หากคุณดูที่คำถามก่อนหน้านี้จะทำเพราะคล้ายกับการชนขอบจากการเปิดแป้นพิมพ์เสมือนบนอุปกรณ์มือถือ (ขอบล่างเป็นเพียงการเปลี่ยน 1: 1 เพื่อแก้ปัญหาการแก้ปัญหา)

— Ryan Peschel

3

วิธีแก้ปัญหาง่าย ๆ คือการตั้งค่าก่อนหน้านี้scrollTopสลับ ที่นี่ฉันกำลังใช้ชุดข้อมูลเพื่อเก็บscrollTopค่าก่อนหน้าคุณสามารถใช้ตัวแปรอย่างใดอย่างหนึ่ง

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>

ขยายตัวอย่างข้อมูล

— User863
แหล่งที่มา

0

ฉันหมายถึงต่อไปนี้เป็นวิธีแก้ปัญหา CSS เท่านั้นที่แก้ตัวอย่างของคุณ:

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

.messages{margin-top:-100px;}

แต่ฉันไม่คิดว่ามันจะช่วยให้คุณมีปัญหาเดิมของแป้นพิมพ์เสมือนจริง แต่บางทีนี่อาจเป็นแรงบันดาลใจให้คนอื่นหาทางแก้ปัญหา

ปัญหาหลักที่น่าจะเป็นที่เลื่อนที่มีอยู่แล้วทำสิ่งที่คุณต้องการ:

รักษาตำแหน่งไว้เพื่อให้สามารถอ่านเนื้อหาล่าสุดได้

ยกเว้นแถบเลื่อนตัดสินใจว่าคุณต้องการเห็น TOP ของเนื้อหาที่มองเห็นในปัจจุบันไม่ใช่ด้านล่าง (ง่ายกว่าที่จะดูว่าคุณใช้หมายเลข: https://jsfiddle.net/1co3x48n/ )

หากคุณยินดีที่จะใช้จาวาสคริปต์ทุกคำตอบมีดังนี้: https://www.google.com/search?q=scrollbar+always+on+bottom+css+site:stackoverflow.com

ความจริงแล้วความจริงที่ว่าคุณสามารถผ่านหน้านี้ได้ ~ 3+ หน้าและค้นหาคำตอบ Javascript เท่านั้นบอกฉันว่าคุณจะไม่พบคำตอบแบบ CSS เท่านั้นอย่างแน่นอนไม่ใช่คนที่เข้ากันได้กับเบราว์เซอร์อย่างกว้างขวาง

— Eliezer Berlin
แหล่งที่มา

0

ไม่มีวิธีแก้ปัญหาใดที่ให้มาดูเหมือนจะทำงานได้ ปัญหาเกี่ยวกับการใช้onFocusกล่องข้อความคือมันจะไม่ใช้ถ้ากล่องข้อความนั้นมีโฟกัสอยู่แล้ว ฉันยุ่งกับสิ่งนี้มาหลายชั่วโมงและวิธีแก้ปัญหาที่ใกล้เคียงที่สุดที่ฉันพบคือ:

componentDidMount() {
  this.screenHeight = window.innerHeight;

  let chatElem = document.querySelector(".conversations-chat");

  window.addEventListener('resize', () => {
    let diff = this.screenHeight - window.innerHeight;

    chatElem.scrollTop += diff;

    this.screenHeight = window.innerHeight;      
  });
}

อย่างไรก็ตามสิ่งนี้ดูเหมือนว่าจะได้ผลในบางครั้งเท่านั้น มันใช้งานได้ 100% เมื่อคลิกที่กล่องข้อความ แต่ด้วยเหตุผลบางอย่างเมื่อปิดแป้นพิมพ์เสมือนจริงมันจะทำงานได้ก็ต่อเมื่อมันเลื่อนขึ้นมามากพอ มิฉะนั้นจะรีเซ็ตเป็นตำแหน่งเดิมทุกครั้ง (ใกล้ด้านล่าง แต่ไม่ถึงด้านล่าง)

ไม่แน่ใจว่าเกิดจากอะไร จะต้องตรวจสอบมากขึ้นในวันพรุ่งนี้ฉันคิดว่า นี่คือหนึ่งที่ใกล้ที่สุดแม้ว่า

— Ryan Peschel
แหล่งที่มา

เหมือนที่เราทุกคนกล่าวไว้ในคำตอบของเราดูเหมือนว่าเป็นไปไม่ได้ที่จะใช้ CSS เพียงอย่างเดียว (มีปัญหากับรหัส JS ของคุณซึ่งคือchatElem.scrollTop ต้องไม่น้อยกว่า 0ดังนั้นถ้ามันอยู่ใกล้ด้านบนสุดมันจะพยายามกลายเป็นจำนวนลบกลายเป็น 0 แทนเมื่อคุณทำให้หน้าจอใหญ่ขึ้น อีกครั้งหนึ่งม้วนกระดาษจะปรากฏขึ้นที่ที่ไม่เคยมีมาก่อน)

— Eliezer Berlin

ด้วยโทเค็นเดียวกัน chatElem.scrollTop ต้องไม่เกิน chatElem.scrollHeight - chatElem.offsetHeightดังนั้นมันจะสร้างการเลื่อนพิเศษที่ไม่เคยมีมาก่อนถ้าคุณพยายามทำเช่นนั้น

— Eliezer Berlin

0

สร้างคอนเทนเนอร์เหมือนในตัวอย่างด้านบน แต่เพียงแค่เปลี่ยน CSS เมื่อคุณเริ่มพิมพ์

ฉันไม่ได้ตั้งค่าตำแหน่งแถบเลื่อนเพียงเลื่อนที่เก็บข้อความทั้งหมดขึ้นด้านบน ดังนั้นการเลื่อนตำแหน่งของคุณอาจจะเหมือนเดิม อย่างน้อยที่สุดคุณจะไม่สามารถเห็นเส้นที่อยู่ด้านบนสุดได้

คุณควรจะปรับแต่ง CSS ตามความต้องการของคุณ คุณสามารถทำได้โดยไม่ต้องใช้ JS หากใช้: มุ่งเน้นหรือตั้งค่า CSS ที่แตกต่างกันเล็กน้อยให้สร้างสรรค์ :)

function activate(){
    document.querySelector("#container").classList.toggle("active");
  }

#container{
    position:relative;
    width:300px;
    height:100vh;
    max-height:230px;
    overflow:hidden;
  }
  #messages{
    position:absolute;
    bottom:30px;
    overflow:auto;
    height:200px;
    width:100%;
    background:#eee;
  }
  #container.active #messages {
    bottom:100px;
  }
  #send-message{
    position:absolute;
    border:1px solid #ccc;
    bottom:0;
    height:28px;
  }
  #container.active #send-message{
    height:100px;
  }

<div id="container">
  <div id="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 id="send-message">
    <input id="newmessage" onclick="activate()" type="text" />
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Rmaxx
แหล่งที่มา

0

คุณต้องเพิ่มdocument.querySelector(".messages").scrollTop = 10000;ให้กับtestฟังก์ชั่นเมื่ออัตรากำไรขั้นต้นเพิ่มแล้วscrollTopไปสิ้นสุดในการโหลดคุณตั้งค่าscrolltopและเมื่อคุณเพิ่มอัตรากำไรขั้นต้นหรือคิดเป็นอัตราลบscrolltopไม่ได้ตั้งอีกครั้งการเปลี่ยนแปลงที่คุณสคริปต์เช่นนี้

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

function test() {
    document.querySelector(".send-message").classList.toggle("some-margin")
            document.querySelector(".messages").scrollTop = 10000;
}
    </script>

— MBadrian
แหล่งที่มา

0

ดูเหมือนว่าจะมีปัญหากับฟังก์ชั่นสลับ js ฉันเปลี่ยนมันเป็น hide & show ที่เรียบง่าย นอกจากนี้ฉันได้เพิ่มความกว้างบนแท็กอินพุต คุณต้องเพิ่มตำแหน่ง: สัมบูรณ์ที่ div-message และด้านล่าง: 0 เพื่อให้อยู่ที่ด้านล่าง จากนั้นวางตำแหน่ง: สัมพันธ์บนคอนเทนเนอร์เพื่อให้ div ของการส่งข้อความอยู่ภายในคอนเทนเนอร์ ซึ่งหมายความว่าที่เก็บข้อความจะไม่ส่งผลกระทบต่อข้อความของพวกเขาและผลักพวกเขาขึ้น

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>

ขยายตัวอย่างข้อมูล

— Shannaki
แหล่งที่มา

ฉันไม่เข้าใจวิธีแก้ปัญหานี้ ดูเหมือนว่าจะซ่อนกล่องข้อความส่งข้อความเมื่อคุณคลิกเพิ่มระยะขอบ?

— Ryan Peschel

-1

วิธี CSS ที่ไม่สมบูรณ์แบบบริสุทธิ์ที่ฉันสามารถทำได้มีดังต่อไปนี้:

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

document.querySelector('button').addEventListener('click', test)

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

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

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

.wrapper {
  display: block;
}

.wrapper--transformed {
  transform: translateY(-100px);
  margin-bottom: -100px;
}

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

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

<div class="container">
  <div class="messages">
    <div class = "wrapper">
      <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">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">hello1</div>
      <div class="message">hello2</div>
    </div>
  </div>
  <div class="send-message">
    <input />
  </div>
</div>
<button>add margin</button>

ขยายตัวอย่างข้อมูล

ส่วนบนสุดมีปัญหาเล็กน้อยเมื่อมีมาร์จิ้น เคล็ดลับที่นี่คือการใช้มาร์จิ้นติดลบและใช้การแปลเพื่อ "เลื่อนขึ้น" (ไม่ใช่เลื่อนจริงๆเป็นเพียงภาพลวงตา) wrapperdiv

— ริชาร์ด
แหล่งที่มา

ปัญหาส่วนบนสุดเป็นบิตของปัญหาใช่ นอกจากนี้ยังเชื่อว่าการรู้ขนาดที่แน่นอนของคีย์บอร์ดมือถือจะต้องรู้ว่าต้องชดเชยเท่าไร? ฉันไม่แน่ใจว่าฉันสามารถเข้าถึงข้อมูลนั้นได้หรือไม่

— Ryan Peschel

เพื่อตอบคำถามของคุณ: ใช่ เทคนิคข้างต้นจะต้องทราบความสูงที่แน่นอนของแป้นพิมพ์ อย่างไรก็ตามมีวิธีการใช้ JS เพื่อกำหนดความสูงขององค์ประกอบและเปลี่ยน CSS

— ริชาร์ด

คุณจะกำหนดความสูงของคีย์บอร์ดเสมือนบนมือถือได้อย่างไร?

— Ryan Peschel

@RyanPeschel แป้นพิมพ์เสมือนจริงเป็นองค์ประกอบของ HTML (เช่นdiv) หรือไม่

— ริชาร์ด

ฉันไม่แน่ใจว่ามันเป็นรหัสได้อย่างไร

— Ryan Peschel

-2

สามารถระบุชื่อสมอได้อย่างง่ายดาย ดูซอ JS ที่https://jsfiddle.net/gvbz93sx/

เปลี่ยน HTML <a name="bottom"></a>

เปลี่ยน JS document.location.hash = "#bottom";

— Animesh
แหล่งที่มา