Embedded iframe scrolls down the page - Thu - Mar 16, 2023 - 11:54am

Dawn Green
Mar 2023 ⚬ 0 Comments Troubleshooting
---
At times, using the iframe code will cause a website to autoscroll down to the event listing or cause other unwanted behavior that jumps down the page.

Embed ThunderTix events on a blank page -- not a home page

The auto-scroll provides a better overall experience for the ticket buyer by resetting the page back to the top of the ThunderTix page to ensure the customer is never looking at a blank area of the page. Generally, the best option is to embed the ThunderTix event on a "blank" page on your website dedicated to the event purchase only.  That way, the scroll goes right into the area of the purchase process where it should rather than skipping relevant content on the parent website.

If you do not want to jump down to the ThunderTix listings, one of these ideas may help:

1. Removing scrolling

If your goal is to simply remove scrolling, you can try this:

This seems to be dependent on the primary website. Sometimes removing one or both of the following bits of code from your iframe code will work:


scrolling="auto" 

2. Or:


<script type="text/javascript">//<![CDATA[document.querySelector('iframe.iframe-class').onload = () => { document.querySelector('iframe.iframe-class').scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'}); };//]]></script>
                 
3. Or:

 Add this to the iframe source code:


 style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';"

Some times the changes will not fix the issue. If that is the case, we suggest you link directly to our ThunderTix public events page. You can find that in your top menu in the upper right corner, then clicking the browser icon and click View Public Display. You can even color or style it in the CSS tab of the left menu.

• Sign up today and start selling tickets Login