Example
When the user enters the widget by using the mouse or touch input, the scroll functionality of the main client page is effectively deactivated. This ensures a seamless and uninterrupted experience within the widget. To achieve this, we utilize a specific code snippet when invoking the Widget component.
Implementation Details:
1. Assigning the Wrapper: We employ querySelector to find the wrapper that encompasses the widget, providing a reference point for our code.2. Attaching Event Listener: An event listener is attached to the Widget using the selected div, allowing us to execute corresponding functions based on the user's interaction with the Virtual Stadium.
3. Disabling Scrolling: When the user moves over the widget or interacts with it, we capture the current scroll position of the client page and disable scrolling. This is achieved by modifying specific CSS properties of the document body. Touch events are also accounted for to handle scenarios where users interact with the widget using touch input.
4. Enabling Scrolling: Upon exiting the widget, scrolling is re-enabled, and the scroll position is restored to its previous state, ensuring a seamless transition.
The provided code snippet serves as a practical example of how to implement this feature. It includes comments to help you understand the process. Note: The code can be adapted to fit different programming languages and frameworks based on your specific project requirements.
<script>
(function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
)})(window,document,"script","https://widgets.sir.sportradar.com/sportradar/widgetloader","SIR", {
language: 'en'
});
// Virtual Stadium Widget
SIR('addWidget', '.sr-vs-widget', 'virtualStadium', { matchId: {MATCH_ID}, channel: "{CHANNEL_ID}", jwt: "{JWT}" }, () => {
// Virtual Stadium DIV reference
let VsDiv = document.querySelector('.sr-widget-1');
let scrollPosition;
let scrollOutside = false;
// Disable scroll and remember scroll position when mouse enters Virtual Stadium Widget
const handleMouseEnter = () => {
console.log('handle enter');
scrollOutside = false;
scrollPosition = window.scrollY;
document.body.style.top = `-${window.scrollY}px`;
document.body.style.position = 'fixed';
document.body.style.overflowY = 'scroll';
document.body.style.inlineSize = '100%';
};
// Enable scroll and resume scroll position when mouse leaves Virtual Stadium Widget
const handleMouseLeave = () => {
console.log('handle leave');
scrollOutside = true;
document.body.style.position = '';
document.body.style.overflowY = '';
document.body.style.inlineSize = '';
document.body.style.top = '';
window.scrollTo(0, scrollPosition);
};
if (VsDiv) {
const handleClickOutside = (event) => {
if (VsDiv && !VsDiv.contains(event.target) && !scrollOutside && handleMouseLeave) {
handleMouseLeave();
}
};
VsDiv.addEventListener('mouseenter', handleMouseEnter);
VsDiv.addEventListener('mouseleave', handleMouseLeave);
document.addEventListener('touchstart', handleClickOutside);
return () => {
VS.removeEventListener('mouseenter', handleMouseEnter);
VS.removeEventListener('mouseleave', handleMouseLeave);
document.removeEventListener('touchstart', handleClickOutside);
};
}
});
</script>
<div class="vs-wrapper">
<div class="sr-vs-widget"></div>
</div>