जब नीचे div द्वारा टक्कर लगी तो div स्क्रॉलिंग रोकें?

Question

मैंने कल भी इसी तरह का सवाल पूछा था, लेकिन इसे खराब तरीके से समझाया, और शुद्ध-सीएसएस समाधान के लिए मेरी इच्छा निर्दिष्ट नहीं की, जो मुझे लगता है कि यह संभव होना चाहिए, इसलिए मैं फिर से कोशिश कर रहा हूं।

असल में, मेरे पास एक मुद्दा है जहां मेरे पास स्क्रॉल करने योग्य संदेशों का एक div है और इसके नीचे एक इनपुट फ़ील्ड है। जब मैं एक बटन पर क्लिक करता हूं, तो मैं चाहूंगा कि इनपुट क्षेत्र 100 पिक्सेल तक टकरा जाए, बिना संदेशों के विभाजन के भी स्क्रॉल हो जाए।

यहां एक ऐसा बेड़ा है जो समस्या को उसकी संपूर्णता में प्रदर्शित करता है

जैसा कि आप देख सकते हैं, जब आप "मार्जिन जोड़ें" बटन पर क्लिक करते हैं, तो संदेश 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>

Comments

हैलो फिर से, मैं वह हूं जिसने जेएस का उपयोग करके आपके प्रश्न का उत्तर दिया। मैं आपको एक ऐसी चीज़ के बारे में सूचित करना चाहता हूँ, जिसकी आपने गलत व्याख्या की होगी। आपने उल्लेख किया: संदेश div भी स्क्रॉल करता है । असल में, यह वह नहीं है divजो स्क्रॉल कर रहा है, यह उस डिव की ऊंचाई है जो कम हो रहा है। तो यह बात क्यों है? खैर, इसका क्या मतलब है कि यह scrollbarअपनी स्थिति को समायोजित नहीं कर रहा है। स्क्रॉलबार केवल अपने कंटेनर के ऊपर से अपनी स्थिति को याद रखता है । जब div की ऊंचाई घट जाती है, तो ऐसा लगता है कि स्क्रॉलबार ऊपर स्क्रॉल कर रहा है, लेकिन यह वास्तव में नहीं है।

— रिचर्ड

आपकी पोस्ट सही अर्थों में समझती है (इस अर्थ में कि लोग जानते हैं कि आपको क्या परिणाम चाहिए), लेकिन मैं सिर्फ इस मामले में कुछ साझा कर रहा हूं कि ज्ञान आपके लिए स्पष्ट नहीं है (मामले में यह आपको हल करने के लिए एक विचार के साथ आने में मदद कर सकता है) समस्या);;

— रिचर्ड

हाँ बहुत सही है, स्पष्टीकरण के लिए धन्यवाद। यह केवल "दिखता है" जैसे यह ऊपर स्क्रॉल कर रहा है, क्योंकि आप कम सामग्री को एक बार नहीं देख सकते हैं। वास्तव में स्क्रॉल स्थिति नहीं बदल रही है। थोड़ा सा भ्रम। हाँ, यह एक समाधान के साथ आने में मदद कर सकता है।

— रयान पेस्केल

Answer 1

यह एक मजेदार उपाय है जो आपको पसंद आ सकता है।

हम उस 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>

Comments

इसमें वह मुद्दा है जहां

— मूसवेल को

ठीक है, मैंने इस पर बहुत समय बिताया है लेकिन अभी भी अन्य डेवलपर्स के पास 3 उत्तर हैं जो आप नहीं ढूंढ रहे हैं :) मैं आपको शुभकामनाएं देने में मदद करने की उम्मीद कर रहा था। लेकिन एक सलाह के रूप में, जो आपके प्रश्न का उत्तर देने के लिए समय बिताते हैं, आपको ऐसा करने से कोई शुल्क नहीं लगेगा।

— तुलसी

ज़रूर। धन्यवाद वैसे भी

— रयान पेस्केल

यह बहुत ही चालाक है ;-) दुर्भाग्य से, उलट स्क्रॉल थोड़ा हटकर है।

— रिचर्ड

Answer 2

स्क्रॉलबार का सामान्य व्यवहार शीर्ष पर होना है, इसलिए जब आप इसे पृष्ठ लोड पर नीचे सेट करते हैं, तो आपको इसे अपने आप को बनाए रखना होगा क्योंकि जब कभी नीचे की सामग्री ने इसे धक्का दिया तो div स्क्रॉल शीर्ष पर चला जाएगा।

इसलिए मेरे पास आपके लिए दो उपाय हैं:

1. संदेशों के अंदर संदेशों को उलट दें ताकि अंतिम संदेश पहले हो जाए इसलिए स्क्रॉल हमेशा शीर्ष पर रहेगा।

2. मैंने किसी भी तत्व के नीचे स्क्रॉल करने के लिए एक जावास्क्रिप्ट फ़ंक्शन बनाया है ताकि आप इसे तब तक कॉल कर सकें जब आप नीचे स्क्रॉल करना चाहें।

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>

Comments

दुर्भाग्य से मैं नीचे स्क्रॉल करने के लिए स्क्रॉल नहीं करना चाहता। मैं इसकी स्थिति बनाए रखना चाहता हूं। इसके अलावा, यह संभावना है कि यह जावास्क्रिप्ट के बिना किया जा सकता है। ओपी से: "इसी तरह, यदि आपको थोड़ा स्क्रॉल किया जाता है तो आप केवल दूसरे से अंतिम संदेश देख सकते हैं, बटन पर क्लिक करने से उस स्थिति को क्लिक पर बनाए रखना चाहिए।"

— रयान पेस्केल

Answer 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>

Comments

यह काम नहीं करता है क्योंकि मार्जिन को लागू करने की आवश्यकता है .send-message। यदि आप मेरे पूर्व प्रश्न को देखते हैं तो यह किया जाता है क्योंकि यह मोबाइल उपकरणों पर वर्चुअल कीबोर्ड खोलने से मार्जिन में

— गड़बड़ी

Answer 4

सरल वर्कअराउंड पिछले 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>

Answer 5

मेरा मतलब है, निम्नलिखित एक सीएसएस केवल समाधान है जो आपके उदाहरण को हल करता है:

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

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

लेकिन मुझे नहीं लगता कि यह वर्चुअल कीबोर्ड की आपकी मूल समस्या के साथ आपकी मदद करेगा। लेकिन शायद यह किसी और को समाधान के लिए प्रेरित कर सकता है।

मुख्य समस्या यह है कि स्क्रॉलबार पहले से ही वही कर रहा है जो आप चाहते हैं:

अपनी स्थिति को बनाए रखना इसलिए सबसे हाल ही में पढ़ी गई सामग्री दिखाई देती है।

स्क्रॉलबार को छोड़कर यह तय करता है कि आप वर्तमान में दिखाई देने वाली सामग्री के शीर्ष को देखना चाहते थे, नीचे नहीं। (यह देखना आसान है कि क्या आप संख्याओं का उपयोग करते हैं: https://jsfiddle.net/1co3x48n/ )

यदि आप जावास्क्रिप्ट का उपयोग करने के लिए तैयार हैं, तो सभी प्रकार के उत्तर हैं: https://www.google.com/search?q=scrollbar+always+on+bottom+css+site:stackoverflow.com

ईमानदारी से, तथ्य यह है कि आप इस के ~ 3 + पृष्ठों के माध्यम से जा सकते हैं और केवल जावास्क्रिप्ट उत्तर पा सकते हैं मुझे बताता है कि आप सीएसएस-केवल उत्तर नहीं ढूंढने जा रहे हैं, निश्चित रूप से एक ऐसा नहीं है जो व्यापक रूप से ब्राउज़र-संगत है।

Answer 6

प्रदान किए गए कोई भी समाधान वास्तव में दुर्भाग्य से काम नहीं करते हैं। 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% काम करता है, लेकिन किसी कारण से वर्चुअल कीबोर्ड को बंद करने पर यह केवल तभी काम करता है जब इसे पर्याप्त स्क्रॉल किया गया हो। अन्यथा यह हर बार (नीचे के पास, लेकिन बिल्कुल नीचे नहीं) उसी स्थिति में रहता है।

निश्चित नहीं है कि क्या कारण है। मुझे लगता है कि कल और अधिक जांच करनी होगी। यह इस प्रकार हालांकि निकटतम है।

Comments

जैसा कि हम सभी ने अपने जवाबों में कहा है, अकेले सीएसएस के साथ ऐसा करना असंभव लगता है। (आपके JS कोड के साथ एक समस्या है, जो यह है कि chatElem.scrollTop 0 से कम नहीं हो सकता है , इसलिए यदि यह बहुत पास है, तो यह एक नकारात्मक संख्या बनने की कोशिश करता है, इसके बजाय 0 हो जाता है, तब जब आप स्क्रीन को बड़ा करते हैं फिर से, एक स्क्रॉल दिखाई देता है जहां पहले नहीं था।)

— एलीएज़र बर्लिन

एक ही टोकन के द्वारा, chatElem.scrollTop chatElem.scrollHeight - chatElem.offsetHeight से अधिक नहीं हो सकता है , इसलिए यह एक अतिरिक्त स्क्रॉल बनाएगा जहाँ पहले कोई नहीं था यदि आप ऐसा करने की कोशिश करते हैं।

— एलिएजर बर्लिन

Answer 7

ऊपर दिए गए उदाहरणों की तरह एक कंटेनर बनाएं, लेकिन जब आप लिखना शुरू करते हैं तो बस 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>

Answer 8

आप जोड़ना आवश्यक है 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>

Answer 9

जेएस टॉगल फ़ंक्शन के साथ एक समस्या प्रतीत होती है। मैंने इसे एक साधारण छिपाने और शो में बदल दिया है। इसके अलावा, मैंने इनपुट टैग पर एक चौड़ाई जोड़ी है। आपको एक पोजीशन जोड़ने की भी आवश्यकता है: सेंड-मैसेज डिव और बॉटम पर निरपेक्ष: 0 इसलिए यह सबसे नीचे रहता है। फिर स्थान की स्थिति: कंटेनर पर सापेक्ष ताकि संदेश भेजें डिव कंटेनर के भीतर रहे। इसका मतलब यह है कि संदेश कंटेनर खुद संदेशों को प्रभावित नहीं करेगा और उन्हें धक्का देगा।

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>

Comments

मैं इस समाधान को नहीं समझता। जब आप ऐड मार्जिन पर क्लिक करते हैं, तो यह संदेश भेजने वाले टेक्स्टबॉक्स को छुपाने लगता है?

— रयान पेशेल

Answer 10

एक शुद्ध अपूर्ण सीएसएस दृष्टिकोण जिसके साथ मैं आ सकता हूं वह निम्नलिखित है:

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 का अनुवाद करने के लिए उपयोग कर रही है ।

Comments

सबसे ऊपरी खंड का मुद्दा थोड़ा सा है, हाँ। इसके अलावा, क्या यह पता करने के लिए मोबाइल कीबोर्ड के सटीक आकार को जानने के लिए कि कितनी क्षतिपूर्ति करनी है? मुझे यकीन नहीं है अगर मेरे पास उस जानकारी तक पहुंच है।

— रयान पेशेल

अपने प्रश्न का उत्तर देने के लिए: हाँ। उपरोक्त तकनीक को कीबोर्ड की सही ऊंचाई का पता होना चाहिए। हालांकि, एक तत्व की ऊंचाई निर्धारित करने और सीएसएस को बदलने के लिए जेएस का उपयोग करने के तरीके हैं।

— रिचर्ड

आप मोबाइल वर्चुअल कीबोर्ड की ऊंचाई कैसे निर्धारित करेंगे?

— रयान पेशेल

@RyanPeschel क्या वह वर्चुअल कीबोर्ड HTML (जैसे div) का एक तत्व है ?

— रिचर्ड

मुझे यकीन नहीं है कि यह कैसे कोडित है।

— रयान पेशेल

Answer 11

यह बहुत आसानी से लंगर नामों से संबोधित किया जा सकता है। JS fiddle को https://jsfiddle.net/gvbz93sx/ पर देखें

HTML बदलें <a name="bottom"></a>

जेएस चेंज document.location.hash = "#bottom";