简体   繁体   中英

Scrolling not working on Samsung Internet

I'm creating a chat app, and I tried to implement autoscroll feature for it.
But it's not working on Samsung Internet(It's worked on Firefox Dev Edition(normal mode and interactive design mode) and Chrome Mobile), especially when I used the submit button on the keyboard. Here's the screenshots:
Firefox Dev Edition Interactive Design Mode Screenshot(gif)
Samsung Internet Screenshot(gif)

And here's the code:

let chatview = document.querySelector('#chatview')
if (chatview.scrollTop >= chatview.scrollHeight - chatview.clientHeight)
  setTimeout(() => chatview.scrollTo(0, chatview.scrollHeight), 50)

Oh, and the reason why I added 50ms delay is to wait for element addition(powered by Vue's v-for).

Just for those who are still looking for an answer: I had the same problem with Samsung Internet version 7.4.00.70. I've tried several scroll-methods (see below). Seems to be an implementation issue.

Functions i've tested:

// Throws an error saying the method is not defined
window.scrollTo(ScrollToOptions)
// Throws an error saying the method is not defined
window.scroll(ScrollToOptions)
// Throws no error (!) but doesn't work either
window.scroll(x, y)

Links: window.scrollTo() , window.scroll(ScrollToOptions) , window.scroll(x, y)

Since version 7.4 reached stable state in August 2018, i would have expected it to work.

EDIT: Working solution

I've found a solution in this thread using jQuery. animate(( properties [, duration][, easing][, complete]))

$(element).animate(
   { scrollTop: scrolling },                 // Object of CSS properties
   250,                                      // Duration
   'easeOutQuad',                            // jQuery's Easing
   () => { $(element).stop(true, true); }    // Callback function
);

Here element is the HTML elemente the animation is to be applied on. For detailed explanation of animate() please follow the link. The specified callback function is executed when the animation has been completed. Calling $(element).stop(true, true) ( see ) prevents the scrollbar of being locked. This happened in Chrome when the window was resized. In my case the resize event triggered execution of animate() and i wasn't able to scroll neither by mouse wheel nor by dragging the scrollbar.

This workaround is working on latest Firefox, Chrome, Opera, Edge, Firefox mobile, Chrome mobile, Samsung Internet Browser and Opera mobile.

I wasn't able to test it on safari. You need at least jQuery 1.8.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM