ডিভের নিচে বিভাজনে ডিভ স্ক্রোলিং আটকাবেন?

10

আমি গতকাল একটি অনুরূপ প্রশ্ন জিজ্ঞাসা করেছি কিন্তু এটি খারাপভাবে ব্যাখ্যা করেছি, এবং খাঁটি সিএসএস সমাধানের জন্য আমার আকাঙ্ক্ষা নির্দিষ্ট করেছিলাম না, যা আমি মনে করি এটি সম্ভব হওয়া উচিত, তাই আমি আবার চেষ্টা করছি।

মূলত, আমার একটি সমস্যা রয়েছে যেখানে আমার স্ক্রোলযোগ্য বার্তাগুলির একটি ডিভ এবং এর নীচে একটি ইনপুট ক্ষেত্র রয়েছে। আমি যখন একটি বোতামে ক্লিক করি, আমি চাই ইনপুট ক্ষেত্রটি বার্তাটি স্ক্রোল না করেই 100 পিক্সেল বাম্প করা উচিত।

এখানে এমন একটি ঝাঁকুনি যা সমস্যাটিকে পুরোপুরি দেখায়

আপনি দেখতে পাচ্ছেন, আপনি যখন "মার্জিন যুক্ত করুন" বোতামটি ক্লিক করেন, বার্তাগুলি ডিভ স্ক্রলও আপ করে দেয়। আমি এটি যেখানে ছিল সেখানে থাকতে চাই। একইভাবে, আপনি যদি সামান্য স্ক্রোল করে থাকেন তবে আপনি কেবল দ্বিতীয় থেকে শেষ বার্তাটি দেখতে পান, বোতামটি ক্লিক করলে একইভাবে ক্লিক করার পরে সেই অবস্থানটি ধরে রাখা উচিত।

মজার বিষয় হ'ল এই আচরণটি "কখনও কখনও" সংরক্ষণিত হয়। উদাহরণস্বরূপ, কিছু পরিস্থিতিতে (যা আমি যথেষ্ট পরিমাণে অনুমান করতে পারি না) স্ক্রোলের অবস্থান ধরে রাখা হয়। আমি ঠিক এটির মতো ধারাবাহিকভাবে আচরণ করা চাই।

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>

স্নিপেট প্রসারিত করুন

— রায়ান পেশেল
সূত্র

1

হ্যালো আবার, আমিই সেই ব্যক্তি যিনি আপনার প্রশ্নের উত্তর জেএস ব্যবহার করে দিয়েছিলেন। আমি আপনাকে এমন একটি জিনিস সম্পর্কে অবহিত করতে চাই যা আপনি ভুল ব্যাখ্যা করতে পারেন। আপনি উল্লেখ করেছেন: বার্তাগুলিও পাশাপাশি স্ক্রোল করে । আসলে, এটি divযে স্ক্রোল করছে তা নয়, এটি ডিভের উচ্চতা হ্রাস পাচ্ছে। সুতরাং কেন এই ব্যাপার? ঠিক আছে, এর অর্থ হ'ল scrollbarএটির অবস্থানটি সামঞ্জস্য করছে না। স্ক্রোলবারটি কেবল তার ধারকটির শীর্ষ থেকে তার অবস্থানটি মনে করে। যখন ডিভের উচ্চতা হ্রাস পাবে তখন মনে হচ্ছে স্ক্রোলবারটি স্ক্রোল করে চলেছে তবে এটি আসলে তা নয়।

— রিচার্ড

1

আপনার পোস্টটি সঠিক ধারণা দেয় (এই অর্থে যে জনগণ জানেন যে আপনি কী ফলাফল চান) তবে আমি কেবল এমন কিছু ভাগ করছি যে জ্ঞানটি আপনার কাছে দৃশ্যমান না হয় (যদি এটি সমাধানের একটি ধারণা নিয়ে আসতে আপনাকে সহায়তা করতে পারে) সমস্যা বলেছিলেন) ;-)

— রিচার্ড

হ্যাঁ খুব সত্য, স্পষ্টতার জন্য ধন্যবাদ। এটি কেবল "দেখায়" যেমন এটি স্ক্রোল করে চলেছে, কারণ আপনি নীচের সামগ্রীগুলি একবার দেখতে পারেন না। বাস্তবে স্ক্রোলের অবস্থান পরিবর্তন হচ্ছে না। খানিকটা মায়া। হ্যাঁ, এটি একটি সমাধান নিয়ে আসতে পারে।

— রায়ান পেশেল

5

এটি একটি মজার সমাধান যা আপনার পছন্দ হতে পারে।

ডিভি সম্পর্কে আমরা কী জানি যে এটি কেবল স্ক্রোলবারের শীর্ষ অবস্থান সংরক্ষণ করে তাই কোনও কারণে যদি উচ্চতা পরিবর্তিত হয় তবে স্ক্রোলবারটি একই থাকবে এবং এটিই আপনার সমস্যার কারণ হয়ে দাঁড়ায়।

কাজের হিসাবে আপনি .messages180 ডিগ্রিটি ব্যবহার করে উল্টাতে পারবেন এবং সামগ্রী ফ্লিপিং বাতিল করতে transform: rotate(180deg) scaleX(-1);পিছনে পিছনে ফ্লিপ .messageকরতে পারেন তবে ডিভটি নীচে স্ক্রোলবারটি (যা শীর্ষে থাকবে) স্বয়ংক্রিয়ভাবে বজায় রাখবে।

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>

স্নিপেট প্রসারিত করুন

— পুদিনা
সূত্র

এটি যেখানে ইস্যুটি মাউসহিলটি পিছনের দিকে রয়েছে সেখানে রয়েছে (স্ক্রোলিং উপরে চলে যাচ্ছে এবং নীচে স্ক্রোলিং উপরে যাবে)

— রায়ান পেশেল

ঠিক আছে আমি এটিতে অনেক সময় ব্যয় করেছি তবে এখনও অন্যান্য বিকাশকারীদের 3 টি উত্তর রয়েছে যা আপনি খুঁজছেন না :) আমি আপনাকে সৌভাগ্য কামনা করতে সাহায্য করার প্রত্যাশা করছিলাম। কিন্তু পরামর্শ হিসাবে আপভোট যারা আপনার প্রশ্নের উত্তর দেওয়ার চেষ্টা করতে সময় ব্যয় করে তা করে আপনার চার্জ নেওয়া হবে না।

— তুলসী

2

ঠিক. যাইহোক ধন্যবাদ

— রায়ান পেশেল

এটি খুব চালাক ;-) দুর্ভাগ্যক্রমে, বিপরীত স্ক্রোলিংটি কিছুটা অফ-পপিং।

— রিচার্ড

3

এটি শীর্ষে থাকা স্ক্রোলবারের স্বাভাবিক আচরণ, সুতরাং আপনি পৃষ্ঠা লোডের নীচে সেট করার সময় আপনাকে এটিকে আপনার নিজের বজায় রাখতে হবে কারণ যখন নীচের বিষয়বস্তু এটিকে ধাক্কা দেয় তখন ডিভ স্ক্রোল শীর্ষে চলে যায়।

সুতরাং আপনার জন্য আমার দুটি সমাধান রয়েছে:

বার্তাগুলির ভিতরে থাকা বার্তাগুলি ডিভের অভ্যন্তরে বিপরীত করুন যাতে শেষ বার্তাটি প্রথম হবে তাই স্ক্রোল সর্বদা শীর্ষে থাকবে।
যে কোনও উপাদানটির নীচে স্ক্রোল করার জন্য আমি একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করেছি যাতে আপনি যখনই নীচে স্ক্রোল করতে চান তখনই এটি কল করবেন।

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>

স্নিপেট প্রসারিত করুন

— পুদিনা
সূত্র

দুর্ভাগ্যক্রমে আমি কেবল নীচে স্ক্রোল করতে স্ক্রোল করতে চাই না। আমি এর অবস্থান বজায় রাখতে চাই এছাড়াও, সম্ভবত এটি জাভাস্ক্রিপ্ট ছাড়াই করা যেতে পারে। ওপি থেকে: "একইভাবে, আপনি যদি সামান্য স্ক্রোল করে থাকেন তবে আপনি কেবল দ্বিতীয় থেকে শেষ বার্তাটি দেখতে পান, বোতামটি ক্লিক করলে একইভাবে ক্লিক করার পরে সেই অবস্থানটি ধরে রাখা উচিত।"

— রায়ান পেশেল

3

আপনি অন্য উপায়ে এটি করতে পারেন, উচ্চতা দিয়ে .messages পরিবর্তে এটি দেয়ার পরিবর্তে .containerএটি বার্তাগুলিকে প্রভাবিত করবে না divতবে আপনি যদি এটিটি দিচ্ছেন তবে .containerএটি আপনার ডিভকে চাপ দেবে কারণ মার্জিন মূলটির ভিতরে রয়েছে ডিভ যার উচ্চতা রয়েছে।

এই স্নিপেট পরীক্ষা করুন

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 প্রতিস্থাপন)

— রায়ান পেশেল

3

scrollTopটগল- এ পূর্ববর্তীটি সেট করা সহজ কাজ ound এখানে আমি পূর্ববর্তী মান সংরক্ষণ করতে ডেটাসেট ব্যবহার করছি 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

আমি বলতে চাইছি, নীচে একটি সিএসএস সমাধান রয়েছে যা আপনার উদাহরণটিকে হুবহু সমাধান করে:

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

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

তবে আমি মনে করি না যে এটি ভার্চুয়াল কীবোর্ডের আসল সমস্যাটি নিয়ে আপনাকে সহায়তা করবে। তবে সম্ভবত এটি সমাধানের জন্য অন্য কাউকে অনুপ্রাণিত করতে পারে।

মূল সমস্যাটি মনে হচ্ছে যে স্ক্রোলবারটি ইতিমধ্যে আপনি যা চান ঠিক তেমন করছে:

এর অবস্থান বজায় রাখা যাতে সর্বাধিক পঠিত সামগ্রী দৃশ্যমান হয়।

স্ক্রোলবারের সিদ্ধান্ত ব্যতীত আপনি বর্তমানে দৃশ্যমান সামগ্রীর শীর্ষস্থানীয় দেখতে চেয়েছিলেন, নীচে নয় not (আপনি সংখ্যা ব্যবহার করেন কিনা তা দেখতে আরও সহজ: https://jsfiddle.net/1co3x48n/ )

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে ইচ্ছুক হন তবে সমস্ত প্রকারের উত্তর রয়েছে: https://www.google.com/search?q=scrolbar+always+on+bottom+css+site:stackoverflow.com

সত্য, আপনি এর of 3 + পৃষ্ঠাগুলি দিয়ে যেতে পারেন এবং কেবল জাভাস্ক্রিপ্টের উত্তরগুলি পেতে পারেন তা আমাকে বলে যে আপনি কোনও সিএসএস-উত্তর খুঁজে পাবেন না, অবশ্যই ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ এমন একটি নয়।

— এলিয়েজার বার্লিন
সূত্র

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% সময় কাজ করে, তবে ভার্চুয়াল কীবোর্ডটি বন্ধ করার সময় কোনও কারণে যদি এটি যথেষ্ট পরিমাণে স্ক্রোল করা থাকে তবে এটি কাজ করে। অন্যথায় এটি প্রতিবার একই অবস্থানটিতে পুনরায় সেট হয় (নীচের দিকে, তবে বেশ নীচে নয়)।

নিশ্চিত কি না যে কি কারণ। আগামীকাল আরও তদন্ত করতে হবে আমার ধারণা। যদিও এটি এখনও সবচেয়ে নিকটতম।

— রায়ান পেশেল
সূত্র

আমরা সকলেই আমাদের উত্তরগুলিতে বলেছি, কেবল সিএসএসের সাথে এটি করা অসম্ভব বলে মনে হচ্ছে। (আপনার জেএস কোডের সাথে একটি সমস্যা রয়েছে, এটি হ'ল চ্যাটএলেম.স্ক্রোলটপ 0 এর চেয়ে কম হতে পারে না , তাই এটি যদি শীর্ষের কাছাকাছি হয় তবে এটি একটি নেতিবাচক সংখ্যায় পরিণত হওয়ার চেষ্টা করে, পরিবর্তে 0 হয়, যখন আপনি পর্দা আরও বড় করবেন তখন আবার, যেখানে আগে ছিল না সেখানে একটি স্ক্রোল উপস্থিত হবে))

— এলিয়েজার বার্লিন

একই টোকেন অনুসারে, chatElem.scrollTop চ্যাটএলেম.স্ক্রোলহাইট - চ্যাটলেম.অফসেটহাইটের চেয়ে বেশি হতে পারে না , তাই এটি একটি অতিরিক্ত স্ক্রোল তৈরি করবে যেখানে আপনি এটি করার চেষ্টা করলে সেখানে আগে কখনও ছিল না।

— এলিজার বার্লিন

0

উপরের উদাহরণগুলির মতো একটি ধারক তৈরি করুন, তবে আপনি টাইপ করা শুরু করার পরে কেবল সিএসএস পরিবর্তন করুন।

আমি স্ক্রোলবারের অবস্থানটি সেট করি না, কেবলমাত্র পুরো বার্তা ধারকটিকে উপরের দিকে সরান। সুতরাং আপনার স্ক্রোলপজিশন যাই হোক না কেন, একই থাকবে। কমপক্ষে নীচের দিকে, অবশ্যই আপনি শীর্ষে লাইনগুলি দেখতে সক্ষম হবেন না।

আপনার নিজের প্রয়োজন অনুসারে 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

জেএস টগল ফাংশনে সমস্যা আছে বলে মনে হচ্ছে। আমি এটিকে একটি সাধারণ আড়াল & শোতে পরিবর্তন করেছি। এছাড়াও আমি ইনপুট ট্যাগে প্রস্থ যুক্ত করেছি। আপনাকে একটি অবস্থানও যুক্ত করতে হবে: প্রেরণ-বার্তা ডিভ এবং নীচে সম্পূর্ণ: 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>

স্নিপেট প্রসারিত করুন

— Shannaki
সূত্র

আমি এই সমাধান বুঝতে পারি না। আপনি যখন মার্জিন যুক্ত ক্লিক করেন তখন এটি কেবল প্রেরণ বার্তা পাঠ্যবাক্সটি লুকিয়ে রাখবে বলে মনে হচ্ছে?

— রায়ান পেশেল

-1

একটি খাঁটি অসম্পূর্ণ সিএসএস পদ্ধতির সাথে আমি আসতে পারি যেটি নিম্নলিখিত:

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>

স্নিপেট প্রসারিত করুন

মার্জিন থাকলে শীর্ষস্থানীয় বিভাগে কিছুটা সমস্যা হয়। কৌতুকটি এখানে নেতিবাচক মার্জিন ব্যবহার করে এবং "স্ক্রোল আপ" (সত্যই কোনও স্ক্রোল নয়, কেবল একটি বিভ্রম) ডিভ অনুবাদ করতে ব্যবহার করছে wrapper।

— রিচার্ড
সূত্র

শীর্ষতম বিভাগের ইস্যুটি হ'ল কিছুটা ইস্যু। এছাড়াও, এই ক্ষতিপূরণটি কী কী তা জানতে মোবাইল কীবোর্ডের সঠিক আকারটি জেনে থাকতে পারে? আমি নিশ্চিত না যে আমার কাছে সেই তথ্য অ্যাক্সেস আছে কিনা।

— রায়ান পেশেল

আপনার প্রশ্নের উত্তর দিতে: হ্যাঁ উপরের কৌশলটি অবশ্যই কীবোর্ডের সঠিক উচ্চতা জানতে হবে। তবে কোনও উপাদানটির উচ্চতা নির্ধারণ এবং সিএসএস পরিবর্তন করার জন্য জেএস ব্যবহার করার উপায় রয়েছে।

— রিচার্ড

আপনি কীভাবে মোবাইল ভার্চুয়াল কীবোর্ডের উচ্চতা নির্ধারণ করবেন?

— রায়ান পেশেল

@ রায়ানপেসেল কি ভার্চুয়াল কীবোর্ডটি এইচটিএমএল (যেমন div) এর একটি উপাদান ?

— রিচার্ড

আমি কীভাবে কোডিং করেছি তা নিশ্চিত নই।

— রায়ান পেশেল

-2

এটি খুব সহজেই অ্যাঙ্কারের নাম সম্বোধন করা যেতে পারে। Https://jsfiddle.net/gvbz93sx/ এ জেএস ফ্রিডলটি দেখুন

এইচটিএমএল পরিবর্তন <a name="bottom"></a>

জেএস চেঞ্জ document.location.hash = "#bottom";

— অনিমেষ
সূত্র