-1

I have a website, https://coolkids.gq. I’ve asked a lot of questions on this site because I’ve been through many different methods to attempt to create the perfect non-proxy website cloning script.

This (hopefully!) will be the final question on the matter. The final issue is with iOS. There is this weird scrolling effect where you can continue overscrolling/rubber banding past the main area of the page you can normally see. This means you can see stuff that’s normally hidden behind the edges of the <body>. In my case, if you use iOS, especially safari, you can scroll up on the iframe and see an advert banner from the ‘CMS’ I’m using for the homepage that I hid by setting 50 pixels of the iframe to be hidden above the top of the page.

I need to load a seperate stylesheet for iOS to solve this that makes the page and iframe really long and then stops people from scrolling inside the iframe, but allows them to scroll the body, allowing them to see the rest of the iframe because it’s in a fixed position along the very long page.

First of all, how do I make it so a user can’t scroll in an iframe (it’s cross domain and I don’t have much control over it) but can still touch buttons in it?

Second, how can I use JavaScript to change the CSS? Here’s the code I’ve tried so far:

var _iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad/);

if (_iOSDevice == ‘true’) {
  document.html.style.height = “400 % ”;
  document.html.style.overflow = “hidden”;
  document.maincode.style.min - height = “calc(1000 % +50 px)”;
  alert(“iOS is being used”);
} else if (_iOSDevice == ‘false’) {
  alert(“iOS is not being used”);
}

The alerts are just there for testing purposes.

The bit that detects whether iOS is used or not works fine - I tested it by putting alert(_iOSDevice) and it always alerted true on iOS but false anywhere else.

However, my if () {} code doesn’t seem to function, as the CSS doesn’t change on iOS and neither of the two test alert() systems function.

So how do I:

  1. Stop users from scrolling in my iframe but allow them to touch buttons
  2. Fix my JavaScript to change the CSS for iOS users so that they can’t scroll in the cross domain iframe but can press buttons in it?

For number 2 I think I’m going to make a really long page and then stretch the iframe to fit that so it doesn’t need to scroll because the page always fits inside of it, then disable scrolling in the iframe, but I’m not sure how to do this.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Evan McGregor
  • 7
  • 2
  • Does this answer your question? [Detect iPhone/iPad purely by css](https://stackoverflow.com/questions/3839809/detect-iphone-ipad-purely-by-css) – Greedo Jun 23 '20 at 10:25
  • I think it would be cleaner and easier to do that with a media query – Greedo Jun 23 '20 at 10:26
  • Media queries wouldn’t be able to distinguish between iOS and Android, would they? And if display resolutions change, they wouldn’t be able to detect it. I need to use JavaScript because if any iDevice that isn’t a Mac is used the new CSS needs to be used. – Evan McGregor Jun 23 '20 at 10:56

1 Answers1

-1

You can add or remove css classes to/from an html element using vanilla js:

var element = document.querySelector('div[id=divId]');
element.setAttribute('class', 'class1 class2 class3'); // Set the classes

You could use vanilla js to set the style:

element.setAtttribute('style', 'top:33px;background-position: 1251px 0px;'); // add your custom css

You could use jQuery to add or remove css classes:

$('div#divId').addClass('hidden');
$('div#divId').removeClass('hidden');

I had a look at your page, I think you want to stop users from scrolling up, but enable them to scroll down? If so you could just hide that element by setting display:none.

When I did some development for Safari on an iPhone, I found it handy to have a javascript console (hnl.mobileConsole.js) at the bottom of the page for debugging.

Peter Bennett
  • 1
  • 1