Fit content on 1378x768 device (follow up)
The previous commits broke support on Chrome / Safari on iOS. `HTMLElement.scroll` does not seem to work when the height is set as a percentage. This commit also uses `HTMLElement#scrollHeight` instead of "offsetHeight".
This commit is contained in:
parent
c928f56601
commit
0cf6089fb7
2 changed files with 12 additions and 3 deletions
|
@ -77,11 +77,20 @@ body {
|
|||
ul.stream {
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
height: 65%;
|
||||
max-height: 400px;
|
||||
height: 400px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
/* Height of 595px, or less */
|
||||
@media screen and (max-height: 595px) {
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
/* Height of 625px, or less */
|
||||
@media screen and (max-height: 625px) {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
li.ayah {
|
||||
span.surah-id.ayah-id {
|
||||
display: block;
|
||||
|
|
|
@ -23,7 +23,7 @@ export function Stream({ surah, stream }: StreamProps) {
|
|||
useEffect(() => {
|
||||
const el: HTMLElement = document.querySelector("ul.stream");
|
||||
el.scroll({
|
||||
top: el.offsetHeight * stream.length,
|
||||
top: el.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, [stream]);
|
||||
|
|
Loading…
Reference in a new issue