Force mobile onscreen keyboard to not be position absolute? [duplicate]

问题

I'm developing a chat and it works on desktop but on mobile when you select the textbox and it automatically opens the virtual onscreen keyboard, the onscreen keyboard seems to overlay itself (similar to position:fixed over the messages div, rather than bumping it.

Basically, the messages div should retain its scroll position rather than adjusting. If you can see the latest message, you still see the latest message. If you can only see the second latest message, similarly, after opening the keyboard you should be able to see it.

Here's a full JSFiddle demo demonstrating the issue.

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

	function test() {
		document.querySelector(".mobile-keyboard").classList.toggle("show")
	}

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

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

	.send-message {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	}
  
  .mobile-keyboard {
	display: none;
	height: 100px;
	background-color: #ccc;
  }
  
  .show {
	display: block;
  }

<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">
	<div class="mobile-keyboard"></div>
	<input />
  </div>
</div>

<button onclick="test()">show keyboard</button>

I believe this should be able to be accomplished with editing the HTML and CSS only, but I have not been able to figure it out. I'd prefer a CSS approach, but a robust JavaScript one should work too.

The solution shouldn't edit the CSS for the mobile-keyboard because it is not possible to edit as far as I know. The div I have created there is a substitute for the real keyboard that automatically appears on mobile when you select the textbox (which has the same effect on appearance as the regular mobile keyboard in that it doesn't bump the contents)

回答1:

calling the function below, passing in the scrolling element as the argument, works in Android mobile devices

function bottomScroller(scroller) {
    let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
    scroller.addEventListener('scroll', () => scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
    window.addEventListener('resize', () => scroller.scrollTop = scroller.scrollHeight - scrollBottom - scroller.clientHeight;
};

As for iOS - not sure, as I don't use Apple

来源：https://stackoverflow.com/questions/59656107/force-mobile-onscreen-keyboard-to-not-be-position-absolute

标签

javascript

android

html

css

mobile