javascript - Why does website not scroll to top of container when phone is rotated?

admin管理员组

文章数量:1122846

I'm using Elementor. I have a container that has a price list in it which looks terrible on mobile portrait. I used the responsive setting to hide that container on mobile portrait. Then I added a container above it, which is only visible on mobile portrait, with a graphic and message informing the user to rotate phone to see our price list.

The problem is that when the phone is rotated it takes the user to the container below the price list, so the user would have to scroll up to see the price list, but they wouldn't know that.

I added some java script in the container with the graphic that would scroll the phone up when rotated, and it worked. However, it also affected the behavior of the buttons in the accordion container with the price list. Anytime one of those buttons was tapped, it would also scroll the website up. This would happen on mobile, tablet, and computer.

I tried various iterations of this javascript, but nothing worked. This is best version of javascrip that I tried:

<script>
function handleOrientationChange() {
   const isLandscape = window.matchMedia("(orientation: landscape)").matches;
   const landscapeWarning = document.getElementById('landscape-warning');
   
   const isMobile = window.matchMedia('(max-width: 768px)').matches; // Adjust max-width as needed for your mobile breakpoint.
   
   if (isLandscape && isMobile && landscapeWarning && window.getComputedStyle(landscapeWarning).display !== 'none') {
       window.scrollBy(0, -1400); // Adjust scroll amount as needed
   }
}

window.addEventListener("resize", handleOrientationChange);
handleOrientationChange();
</script>

The ID "landscape-warning" was applied to the container with the image on portrait mobile.

What am I missing here?

本文标签： javascriptWhy does website not scroll to top of container when phone is rotated