Is it possible to disable the scrolling in iOS Safari save your current position?

0 like 0 dislike
8 views
Companions, prompt, please, is there a way to prevent scrolling in iOS Safari without using body { position: fixed; } and like this solutions?

I feel that the ban worked by type of work, body { overflow: hidden; } in Chrome, in other words, below the current scroll position is preserved (not replayed would be the top of the document), and the height of the viewport a is not skipped when it is activated.

Thus it is necessary to have the ability to save the scrolling in conditional modal window.

Suitable for both JS and CSS solution to any degree of uporotyh (if you have it and it works adequately).

PS If there is a solution, something tells me that it is comprehensive and not limited to relatively simple JS code or CSS hack, because even in the relatively advanced resources, this problem is not solved.
by | 8 views

2 Answers

0 like 0 dislike
The simple solution found on kinopoisk.ru. As always in such cases, it was on the surface.

In a variable saved current position of the scroll body, the body hang styles resulting value (only negative) in the top property. Just need to add position: fixed and left: 0 (right: 0, too, will not be worse). Yes, still fixed.

Here are inline styles for body from working of this method on the Kinopoisk:
top: -345px; left: 0px; right: 0px; position: fixed;

Tested on devices: works in iOS Safari 11 and 12. Other ways of solving this problem could not be found.

Update. Forgot to add the function that I wrote, they are not super-Hyper cool, but working:
// 1. Fixing bodyFixPosition function() { setTimeout( function() { /* Set the delay necessary to avoid "conflict" in the case that the lock function is invoked immediately after raspisanii (unfixing affect the validity of raspisanii due to concurrent actions) */ if ( !document.body.hasAttribute('data-body-scroll-fix') ) { let scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // Get the scroll position of document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Set the attribute value scrolling document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; document.body.style.top = '-' + scrollPosition + 'px'; document.body.style.left = '0'; } }, 10 ); /* Possible delay is smaller, but I have worked well with this value on all devices and browsers */ } // 2. Unfixing bodyUnfixPosition function() { if ( document.body.hasAttribute('data-body-scroll-fix') ) { let scrollPosition = document.body.getAttribute('data-body-scroll-fixed'); // Get the scrolling position of the attribute document.body.removeAttribute('data-body-scroll-fixed'); // Delete the attribute document.body.style.overflow = "; document.body.style.position = "; document.body.style.top = "; document.body.style.left = "; window.scroll(0, scrollPosition); // Scrollable on the received attribute value } }


For Bootstrap'JS modal Windows can make a universal call these functions when they are opening and closing:

$(document).on('shown.bs.modal', function () { // open any modal window Bootstrap bodyFixPosition(); }) $(document).on('hidden.bs.modal', function () { // close any modal Windows Bootstrap bodyUnfixPosition(); })
by
0 like 0 dislike
What version?
It's tried?
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
4 answers
0 like 0 dislike
2 answers
asked May 10, 2019 by thebatik
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
110,608 questions
257,186 answers
0 comments
28,707 users