Prevent over scrolling on safari and iOS

Webdesign Help
1

hello. I hope it the right place to ask.
i have this site that i built and its all working fine (its still in tast), except that in safari, when i open the Gallery modal, i got that weird over scrolling on the body below that body keep scrolling from inside the modal). i dont get that behavior on other browser. how do i get over it?

i found this ‘body scroll lock’ js to prevent this behavior, but i can’t seems to find out how to implement this on my site.

my site address:

any help will be appreciate.

2

Is there a specific part of your gallery doing this? I have no issues with it at all in Safari, looks good. Nice job!

Try clearing your browser cache maybe?

3

The only version of safari I have is on my ancient ipad, but it seems to load ok.

A few things I noticed in your code…

You are loading 2 versions of jquery (1.11.3 and 3.3.1)

Also unless you have something specific that you need it to do, you might be able to replace your smooth scrolling script with one line of css (I think its already in bootstrap anyway)

html {
  scroll-behavior: smooth;
}

Also It might be this that is giving your scrolling issue…

4

thank you very much for your kind words.

the modal that opens and show all the lightbox galleries, this is the part i meant. when i scroll in it, it get beyond its boundaries and scroll the body underneath. i have cleared all cache and its still an issue. you say you dont see this problem?

5

thank you richard for your advices. i will do that.

6

so, all the tests successfully passed and i’m glad to say that all is working fine from what i can tell.

the only issue left, is the over scrolling thing on safari. it is annoying, cause my main target audience are within that mac environment (advertising agencies and so on).

i found this code that suppose to do exactly what i need (prevent body underneath modal from scrolling)

but i cant succeed of implement it to my site. help will be a big savior.

7

hi, I succeeded to achive that desired behavior on safari on local host only. but when I upload the site to the server the code breaks some how. is something wrong with my code?

<script>
          
          // Select required elements from the DOM
          const modal = document.querySelector("#gallery-print");
          const modal = document.querySelector("#gallery-retouch");
          const modal = document.querySelector("#gallery-renders");
          const modal = document.querySelector("#gallery-branding");
          const modal = document.querySelector("#gallery-web");
          
          const body = document.querySelector("body");
          
          const showModal = function (e) {
              modal.classList.toggle("hidden")}
          
              if (!modal.classList.contains("hidden")) {
                  // Disable scroll
                  body.style.overflow = "hidden"}
              else {
                  // Enable scroll
                  body.style.overflow = "auto"}
</script>