Disable all scrolling on website for mobile

Site URL: https://insidefukushima.org/

Hello,

I'm trying to disable scrolling (both horizontal and vertical) site-wide because it's completely breaking my website on mobile. My website is used to host images, and the template I'm using, Momentum, seems to have serious issues with displaying images on the mobile site format.

The website is insidefukushima.org, and the issue begins in the photo galley pages, like https://insidefukushima.org/no-entry-signs. On a desktop, the page looks completely normal and you can scroll through the images by clicking on the left or right side of an image, or use arrow keys.

If you interact with the pages on mobile by simply taping the images, like you would clicking on them or using arrow keys on desktop, the site works well. However, even slightly moving an image will cause it to skip and settle between images. Since most people instinctively "swipe" through images, this causes the pages to break almost immediately.

My question is: how can I disable scrolling on the mobile site so that a visitor can only interact with it by taping on the left or right side of an image?

I have tried many custom CSS lines and absolutely none of them have worked. I have reached out to Squarespace support for help and they said they are aware of the issue but could not give me a timeline for fixing it. I have seen other people post about similar issues but none of the solutions worked for me.

If someone has a solution to this I would love to try it. Unfortunately my website is almost completely useless on mobile right now because of this. I will attach an image of what it looks like when this happens, but you can easily recreate the issue by visiting the website from a phone.

Thank you.

Hi. Have you found the solution yet?

On 12/4/2020 at 7:58 PM, tuanphan said:

Hi. Have you found the solution yet?

I have not. I have tried some new CSS lines

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}
body {
  position: relative;
  }

which seem to disable scrolling on desktop (which isn't even an issue), but nothing will fix the mobile scrolling issue.

try

@media screen and (max-width:767px) {
html, body {
	overflow: hidden;
}
}

17 minutes ago, tuanphan said:

try

@media screen and (max-width:767px) {
html, body {
	overflow: hidden;
}
}

 

Just tried it, unfortunately it still doesn't apply to mobile. The code is still in custom CSS, if you want to try scrolling through something like https://insidefukushima.org/no-entry-signs on mobile.

I tried a few variations of @media screen since it worked site-wide for increasing the size of the information icon only on desktop. I don't understand why it won't work for disabling overflow.

Is there perhaps a page specific solution that I could use through page header code injection? It's not ideal but I could apply something to every page under "photographs" throughout my site.

Try adding to Code Injection Header

<style>
  @media screen and (max-width:767px) {
html, body {
	overflow: hidden;
}
}
</style>

1 hour ago, tuanphan said:

Try adding to Code Injection Header

<style>
  @media screen and (max-width:767px) {
html, body {
	overflow: hidden;
}
}
</style>

 

Unfortunately that didn't work either. It almost seems like the scrolling can't be overridden.

I emailed Squarespace to tell them that nothing will fix it and that my site is completely broken on mobile. They wouldn't give me an ETA last time I spoke to them, but maybe they'll fix it if I keep bugging them.

Per Sqaurespace's suggestion, I have been trying new gallery display methods (which all look substantially worse than momentum's default gallery setup) and I can confirm that hiding overflow works for desktop but not mobile. Something is overriding changes to overflow on mobile.

Setting "overflow: hidden" in CSS disables overflow site-wide for desktop, along with applying it to the header for the full site under "advanced, code injection, header," but this does not work for mobile. 

I really have no idea what to do anymore. If disabling overflow works on desktop but not mobile then something is wrong on the backend.