How to initialize javascript when the user scrolls?

Question

I need the javascript to load after the user scrolls. Right now I have a .phtml file that just has this,

<div id="razoyo-gtm-user-code" style="display:none;" data-mage-init='{ "razoyoGlobalUserCode": { "pageType": "<?= $block->escapeJs($block->getPageType()); ?>"} }'>

Which loads razoyoGlobalUserCode as soon as the page is done loading. But I need the file to load after the user scrolls. So I've tried this:

<script>  
    var razoyo = document.createElement('div');
    razoyo.id = 'razoyo-gtm-user-code';
    razoyo.style = 'display:none';    
    razoyo.setAttribute("data-mage-init", '{ "razoyoTest": { "pageType": "<?= $block->escapeJs($block->getPageType()); ?>"} }');

    document.addEventListener('scroll', function(e) {   
    document.head.appendChild(razoyo);
    });
</script>

However this doesnt fix the issue at all. If someone has any advice on what I can do I would appreciate it a lot. Thanks.

Partab Saifuddin Zakir · Accepted Answer · 2021-04-26 11:03:49Z

0

Try This:

var secret = false,
        testTop = $('#test').offset().top,
    testHeight = $('#test').height(),
    scrlTop;

$(window).on('scroll', function(){
    scrlTop = $(this).scrollTop();
  if(scrlTop > testTop && scrlTop < testTop+testHeight){
    if(!secret){
        console.log('call me once please');
      secret = true;
    }   
  }else{
    secret = false;     
  }
});

answered Apr 26, 2021 at 11:03

Partab Saifuddin Zakir

1,3021 gold badge21 silver badges47 bronze badges

replace your code with this one...

Partab Saifuddin Zakir
– Partab Saifuddin Zakir

2021-04-26 11:04:13 +00:00
Commented Apr 26, 2021 at 11:04

Add a comment |

Stack Exchange Network

How to initialize javascript when the user scrolls?

1 Answer 1

Your Answer

Hot Network Questions

How to initialize javascript when the user scrolls?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions