Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

212
Views
How to make the bottom bar disappear using injected code?

I am a newbie regarding Javascript or injecting code on iOS WKWebView.

Visit this page with user agent equal to safari 13 iOS and scroll down.

At one point, this bar appears at the bottom.

bottom bar

at this moment, if you scroll up the bar disappears.

I am a newbie in Javascript. I found this page that shows a similar effect.

Looking at the source I guess the id of that div is agentFavBar but inspecting the page I see that this div's class change from class="styles___MobileFixedBar-sc-x9qtiw-0 fMaMax" to class="styles___MobileFixedBar-sc-x9qtiw-0 ivYpwt" that is display:none.

I have this iOS app I have to fix where the bar never disappears when you scroll up.

Looking at the app, I see that who created this, that does not work for the company anymore, injectes code to show and hide the bottom bar.

This is the only code I could find that appears the one responsible for this, but like I said the bar shows when I scroll down but do not disappears when I scroll up.

if (document.querySelector('div#FA-HIDE_BOTTOM_NAV')) {
  window.webkit.messageHandlers.hideTabBar.postMessage('hideTabBar');
} 

var banner_height = document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').offsetHeight;
document.querySelector('main').style.paddingBottom = banner_height.toString() + 'px';"
                

and

if (!document.querySelector('div#FA-HIDE_BOTTOM_NAV')){ 
  window.webkit.messageHandlers.showTabBar.postMessage('showTabBar'); 
}

and also discovered this one:

window.onscroll = function(e) {
  if (Math.abs(this.oldScroll - this.scrollY) > 88) { 
    document.querySelector('div.styles___MobileFixedBar-x9qtiw-0.jcioIC').style.display = this.oldScroll > this.scrollY ? 'none' : '';
    this.oldScroll = this.scrollY 
  };
}; window.oldScroll = 0;

One thing I do not understand is why one need to inject javascript if the what the app basically does is to show the mobile version of the site (served by the server based on the user agent) inside a WKWebView.

Do you see this code consistent with hiding the bottom bar? How can I write that to make it work.

NOTE: yes, I know that wkwebviews don't need any injected code to work, but I am not the one who created this app and the guy who did it, somehow messed with the original wkwebview in a way that now, if I remove all injected code the page does not even load.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!