← Back to Discord Forum

Mobile scroll to the top.


Hi guys, I have a mobile app that I have to test whose top header disappears when you swipe/scroll down and reappears when you swipe/scroll up, what is the best method to have it appear when i need it. Scroll into view if needed does not work.

This thread is trying to answer question "What is the best method to make the top header of a mobile app appear when needed, especially when it disappears on scrolling down?"

1 reply

I have "fixed" it by forcing pw to click on an element that is near my desired element. In my case i had to scroll to the top of the page in order for my element to appear (none of the scrolls, mouse, scroll into view methods have worked) and to do so i forced pw to click on a random element on the top of the page so that the page would scroll up and reveal my desired element.


Making Your Mobile App's Header Appear When Needed

Here's a neat trick for you. You can use CSS and JavaScript to control the visibility of your mobile app's top header.

First, create a fixed-positioned header element in your HTML. This will keep the header at the top of the viewport, even when scrolling.

Next, use JavaScript to detect user scrolling behavior. Listen for scroll events on the window object. When a scroll event occurs, check the current scroll position using window.scrollY or window.pageYOffset.

Based on the scroll position, decide whether to show or hide the header. If the user has scrolled past a certain threshold, make the header visible. If they've scrolled back up, hide it.

if (window.scrollY > 100) {
  header.style.display = 'block';
} else {
  header.style.display = 'none';

Another option is to use the Intersection Observer API. This API lets you track elements entering or exiting from within another element's viewport.

Here's how you can use it:

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5,

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      header.style.display = 'block';
    } else {
      header.style.display = 'none';
}, options);

const triggerPoint = document.getElementById('trigger-point');

In this example, options define the configuration for the Intersection Observer. The threshold property determines how much of the target element needs to be visible before triggering an intersection.

Remember to replace 'trigger-point' with the appropriate ID or selector for your trigger point element.

By implementing these methods, you can make your mobile app's top header appear when needed.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.