0

I have a chat log div on my webpage that will scroll fine while on the computer, and it will also scroll fine on mobile while the screen is at the default (zoomed out) position; however, when I zoom in and try to scroll the div, the div will scroll slightly, but unfortunately the entire screen will also scroll (more so than the div)...

Is there a way to prevent this from happening while zoomed?

CSS:

.a
{
    border:1px solid black;
    width:30vw;
    height:30vw;
    position:relative;
    display:inline-block;
    overflow-y:auto;
    overflow:scroll;
    font-size:1.1vw;
    text-align:left;
background-color:white;
}

HTML:

<div class = "a" id = "chatbox">
TylerHough
  • 25
  • 1
  • 11
  • Please provide the CSS/HTML/Javascript you have, otherwise there's no way we can find out what's happening. – hewiefreeman May 29 '19 at 23:33
  • @newplayer65 done – TylerHough May 29 '19 at 23:35
  • Have you tried using `width:30%; height:300px;` as percentage for width and pixels for height (300 could be more/less)? – hewiefreeman May 29 '19 at 23:42
  • @newplayer65 I've tried that (just now) and similar alternatives (all that I could think of, including 'vh' combinations). Mostly everything that I have tried is either mis-matched from computer and mobile (looks bad on one or the other). I think I might have to use some jQuery or clever javascript . – TylerHough May 29 '19 at 23:46
  • This might help, https://stackoverflow.com/a/44875716/11568394 – Anthony Z May 29 '19 at 23:48
  • What I *think* is happening here is that the entries in the chatbox are being continuously updated and it makes someone's tap and hold lose focus. Something is happening continuously in that box that's making it go crazy. I don't know enough about mobile development to tell you anymore but I noticed when you double tap then try to drag, it scrolls normally on an IPhone 8. And sometimes when you leave it alone, it just changes the scrolltop by itself. Looking at the debugger I see alot of things doing `chatbox.scrollTop = something`. – Anthony Z May 30 '19 at 00:22
  • @AnthonyZ hmmm that's interesting... I'll investigate that line of thinking – TylerHough May 30 '19 at 00:44
  • @AnthonyZ I changed it so that it only updates the chat when a message is sent, and the scrolling while zoomed in on mobile issue is still present :( – TylerHough May 31 '19 at 04:55

1 Answers1

0

If the following doesn't work, and if you're ok with it, share your project source with me through a repo or something.

I was able to seemingly fix the issue (on FF and Chrome emulating an IPhone X) by changing the structure of the message nodes.

.a {
  border: 1px solid black;
  width: 30vw;
  height: 30vw;
  position: relative;
  display: inline-block;
  overflow-y: auto;
  overflow: scroll;
  font-size: 1.1vw;
  text-align: left;
  background-color: white;
}

.msg {
  width: 100%;
  font-size: 1.1vw;
  text-align: left;
}

.name {
  color: blue
}

.msgContent {
  color: black
}
<div class="a" id="chatbox">
  <div class="msg">
      <span class="name">Name:</span>
      <span class="msgContent">This is a message.</span>
  </div>
</div>

<!-- what you had --

<div class="a" id="chatbox">
  <label style="color:a1bd77; cursor: pointer;" onclick="profilePreview(), reply_click(this.id)" id="name">name</label>
  : Okay time to start a fresh chat
  <br >
</div>

-- what you had -->

I did not test on an actual phone, so results may vary.

Anthony Z
  • 384
  • 2
  • 9
  • Yeah, all of those properties are being echoed back from a jQuery call, so I tried to implement that solution in there, but I couldn't really notice that much of a difference (it might be marginally better now if anything) unfortunately... I blame this problem entirely on Apple/Safari, and my inability to be able to lock zoom or scroll because they intentionally prevent that. Such a bummer, man. Thank you for the ideas and solutions though - I really appreciate it. If you want the source code I can probably put the files on github for you to take a gander at. – TylerHough May 31 '19 at 22:38
  • It's definitely better on chrome now though! – TylerHough May 31 '19 at 22:40