Mousewheel Scrolling on Post Template (Elementor)

Hello,

You’re asking about this extra script, correct?

If yes, you can change the condition in the script, replacing:

if(is_single( $pages_arr ) || is_page( $pages_arr )) :

with:

if(is_single( $pages_arr ) || is_page( $pages_arr ) || is_singular( 'post' )) :

to enable the mousewheel script on posts or:

if(is_single( $pages_arr ) || is_page( $pages_arr ) || is_post_type_archive()) :

to enable the script on post archives.

Does this help?

Hey @malihu

Thanks so much for the reply. Yes, thats the extra script I’m talking about.

I changed that out as you suggested and targeted the post template ID but it still doesn’t seem to be working. See the code below:

//----- SETUP -----

//MOUSEWHEEL SCROLLING OPTIONS

function ps2id_mousewheel_options($opt){
  $opts = array(
    //Set the IDs of pages or posts that you want the mousewheel functionality to be enabled 
    //and set the target sections URLs for each of your sections of each page
    'ps2id_mousewheel_pages'            =>  array( 
      //Design Page ID
      '12'    =>  array(
        //And its target section IDs
        '#section1', 
        '#section2',  
      ),

      //Project Template ID
      '324'    =>  array(
        //Target Section IDs
        '#section1', 
        '#section2', 
        '#section3',
      ),
		
    ),
    //Special options for the mouse-wheel smooth scrolling (these overwrite the ones in plugin settings)
    //Scroll type/easing
    'ps2id_mousewheel_scroll_easing'        =>  "easeOutQuint",
    //Scroll duration (in milliseconds)
    'ps2id_mousewheel_scroll_duration'        =>  800,
    //Keep the current element highlighted until the next one comes into view (this is needed if the page has non-adjacent sections, i.e. when not all sections are next to one another)
    'ps2id_mousewheel_keep_highlight_until_next'  =>  true,
    //Allow only one highlighted element at a time (should be disabled when $ps2id_mousewheel_keep_highlight_until_next is set to true)
    'ps2id_mousewheel_force_single_highlight'    =>  false,
    //Append the clicked link’s hash value (e.g. #id) to browser’s URL/address bar (this should normally be disabled for better UX)
    'ps2id_mousewheel_append_hash'          =>  false
  );
  $r = (isset($opt) && !empty($opt)) ? $opts[$opt] : $opts;
    return $r;
}

//----- HTML -----

add_action('wp_footer', 'ps2id_mw_html');

function ps2id_mw_html(){
?>
  <?php if(class_exists('malihuPageScroll2id')) : ?>
    <?php
    $pages_arr = ps2id_mw_get_pages();
    $page_id = get_queried_object_id();
    $sections_arr = in_array($page_id, $pages_arr) ? ps2id_mousewheel_options('ps2id_mousewheel_pages')[$page_id] : null;
    ?>
    <?php if(is_single( $pages_arr ) || is_page( $pages_arr ) || is_singular( 'post' )) : ?>
      <?php if(!is_null($sections_arr)) : ?>
        <div id="ps2id-mw-sections-bullets">
          <?php 
          foreach($sections_arr as $section){
            ?>
              <a href="<?php echo $section; ?>" class="ps2id-mw-section-bullet"></a>
            <?php
          }
          ?>
        </div>
      <?php endif; ?>

    <?php endif; ?>
  <?php endif; ?>
<?php
};

//----- Javascript -----

add_action( 'wp_enqueue_scripts', 'ps2id_special_params', 1 );

function ps2id_special_params(){
  if(class_exists('malihuPageScroll2id')){
    $pages_arr = ps2id_mw_get_pages();
    if(is_single( $pages_arr ) || is_page( $pages_arr )) : 
      wp_register_script( 'page-scroll-to-id-mw-js-init', '', array(), '0.0.1', false );
      wp_enqueue_script( 'page-scroll-to-id-mw-js-init' );
      wp_add_inline_script( 'page-scroll-to-id-mw-js-init', 'window.ps2id_special_params={
        highlightSelector: ".ps2id-mw-section-bullet", //mouse-wheel script highlight selector
        scrollEasing: "'.ps2id_mousewheel_options('ps2id_mousewheel_scroll_easing').'", //set a more fitting scroll easing for mousewheel smooth scrolling
        scrollSpeed: '.ps2id_mousewheel_options('ps2id_mousewheel_scroll_duration').', //set a more fitting scrolling duration for mousewheel smooth scrolling
        keepHighlightUntilNext: "'.json_encode(ps2id_mousewheel_options('ps2id_mousewheel_keep_highlight_until_next')).'", //this is needed if the page has non-adjacent sections (i.e. when not all sections are next to one another)
        forceSingleHighlight: "'.json_encode(ps2id_mousewheel_options('ps2id_mousewheel_force_single_highlight')).'", //should be disabled when keepHighlightUntilNext is enabled
        appendHash: "'.json_encode(ps2id_mousewheel_options('ps2id_mousewheel_append_hash')).'" //should normally be disabled for better UX
      };');
    endif;
  }
}

add_action( 'wp_enqueue_scripts', 'ps2id_mw_js', 99 );

function ps2id_mw_js(){
  if(class_exists('malihuPageScroll2id')){
    $pages_arr = ps2id_mw_get_pages();
    if(is_single( $pages_arr ) || is_page( $pages_arr )) : 
      if(PS2ID_MINIFIED_JS){
        $deps = array('jquery','page-scroll-to-id-mw-js-init','page-scroll-to-id-plugin-script');
      }else{
        $deps = array('jquery','page-scroll-to-id-mw-js-init','page-scroll-to-id-plugin-init-script','page-scroll-to-id-plugin-script');
      }
      wp_register_script( 'page-scroll-to-id-mw-js', '', $deps, '0.0.1', true );
      wp_enqueue_script( 'page-scroll-to-id-mw-js' );
      wp_add_inline_script( 'page-scroll-to-id-mw-js', '(function($){
        $(window).on("load",function(){
    
          var doc=$(document),
            mPS2idData=doc.data("mPS2id"),
            mPS2idExt;
    
          if(!mPS2idData){
            console.log("Error: \'Page scroll to id\' plugin not present or activated. Please run the code after plugin is loaded.");
            return;
          }

          if(!$("._mPS2id-t").length) return;
    
          doc.data("mPS2idExtend",{
            selector: "._mPS2id-h",
            currentSelector: function(){
              return this.index($(".mPS2id-highlight-first").length ? $(".mPS2id-highlight-first") : $(".mPS2id-highlight").length ? $(".mPS2id-highlight") : $(".mPS2id-wheel-init"));
            },
            target: function(){
              var curr=$(".mPS2id-target-first").length ? $(".mPS2id-target-first") : $(".mPS2id-target").length ? $(".mPS2id-target") : $(".mPS2id-clicked").length ? $("#"+$(".mPS2id-clicked").attr("href").split("#")[1]) : false;
              if(!curr.length){
                //if no current target exists, get the next and previous closest sections
                var max=999999999,
                  min=-999999999;
                $("._mPS2id-t").each(function(){
                  var pos=mPS2idData.layout==="horizontal" ? this.getBoundingClientRect().left : this.getBoundingClientRect().top;
                  if(pos < 0 && pos > min){
                    min=pos; 
                    curr=$("._mPS2id-t[data-psid-wheel-section=\'"+($(this).data("psid-wheel-section")+1)+"\']");
                  }else if(pos > 0 && pos < max){
                    max=pos; 
                    curr=$("._mPS2id-t[data-psid-wheel-section=\'"+($(this).data("psid-wheel-section")-1)+"\']");
                  }
                });
                $("._mPS2id-h[data-psid-wheel-link=\'"+curr.data("psid-wheel-section")+"\']").addClass("mPS2id-wheel-init");
              }
              return [
                $("._mPS2id-t[data-psid-wheel-section=\'"+(curr.data("psid-wheel-section")-1)+"\']"), //previous target
                curr, //current target
                $("._mPS2id-t[data-psid-wheel-section=\'"+(curr.data("psid-wheel-section")+1)+"\']"), //next target
              ];
            },
            needScroll: function(dir){
              if($("html,body").is(":animated")) return;
              if(dir > 0){ //scrolled fw
                var el=mPS2idExt.target.call()[2][0]; //next adjacent target
                if(mPS2idData.layout==="horizontal"){
                  return el ? el.getBoundingClientRect().left > (window.innerWidth || document.documentElement.clientWidth) : true; //next target is after viewport
                }else{
                  return el ? el.getBoundingClientRect().top > (window.innerHeight || document.documentElement.clientHeight) : true; //next target is below viewport
                }
              }else if(dir < 0){ //scrolled bw
                var el=mPS2idExt.target.call()[0][0]; //previous adjacent target
                if(mPS2idData.layout==="horizontal"){
                  return el ? el.getBoundingClientRect().right < 0 : true; //previous target is before viewport
                }else{
                  return el ? el.getBoundingClientRect().bottom < 0 : true; //previous target is above viewport
                }
              }
            },
            input:{
              y: null,
              x: null},
            i: null,
            time: null,
            support:{
              wheel: false
            }
          }).on("ps2id-scrollSection",function(e,dlt,i){
            var sel=$(mPS2idExt.selector);
            if(!$("html,body").is(":animated")){
              if(!i) i=mPS2idExt.currentSelector.call(sel);
              if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger("click.mPS2id");
            }
          }).on("keydown",function(e){ //keyboard
            var code=e.keyCode ? e.keyCode : e.which,
              keys=$(this).data("mPS2id").layout==="horizontal" ? [37,39] : [38,40];
            if(code===keys[0] || code===keys[1]){
              if(!mPS2idExt.needScroll((code > 38 ? 1 : -1))){ //check if normal scrolling is needed to reach adjacent targets
                if($(mPS2idExt.selector).length) e.preventDefault();
                $(this).trigger("ps2id-scrollSection",(code===keys[0] ? 1 : -1));
              }
            }
          })
          //touch events (remove the following code if you don\'t want to apply the touch functionality)
          .on("pointerdown touchstart",function(e){ //touch (optional)
            var o=e.originalEvent;
            if(o.pointerType==="touch" || e.type==="touchstart"){
              var y=o.screenY || o.changedTouches[0].screenY;
              mPS2idExt.input.y=y;
              if($(this).data("mPS2id").layout==="horizontal"){
                var x=o.screenX || o.changedTouches[0].screenX;
                mPS2idExt.input.x=x;
              }
              mPS2idExt.time=o.timeStamp;
              mPS2idExt.i=mPS2idExt.currentSelector.call($(mPS2idExt.selector));
            }
          }).on("pointerup touchend",function(e){
            var o=e.originalEvent;
            if(o.pointerType==="touch" || e.type==="touchend"){
              var y=o.screenY || o.changedTouches[0].screenY,
                diff=mPS2idExt.input.y-y,
                time=o.timeStamp-mPS2idExt.time,
                i=mPS2idExt.currentSelector.call($(mPS2idExt.selector));
              if($(this).data("mPS2id").layout==="horizontal"){
                var x=o.screenX || o.changedTouches[0].screenX,
                  diff=mPS2idExt.input.x-x;
              }
              if(Math.abs(diff)<2) return;
              var _switch=function(){
                return time<200 && i===mPS2idExt.i;
              };
              var dir=diff > 0 ? 1 : -1;
              if(time < 500 && Math.abs(diff) > 50) $(this).trigger("ps2id-scrollSection",[(diff>0 && _switch() ? -1 : diff<0 && _switch() ? 1 : 0),(_switch() ? mPS2idExt.i : i)]);
            }
          })
          // -----
          .on("ps2id-wheel-init",function(){
            //script initialization
            mPS2idExt=$(this).data("mPS2idExtend");
            $("._mPS2id-t").each(function(index){
              $(this).attr("data-psid-wheel-section",index);
            });
            $("._mPS2id-h").each(function(index){
              $(this).attr("data-psid-wheel-link",index);
            });
            //vanilla js mousewheel event (https://github.com/jquery/jquery/issues/2871)
            document.addEventListener(\'wheel\', wheel, {passive: false}, false);
            document.addEventListener(\'mousewheel\', wheel, {passive: false}, false);
            document.addEventListener(\'DOMMouseScroll\', wheel, {passive: false}, false);
            function wheel(e){
              if(e.type == "wheel"){
                mPS2idExt.support.wheel = true;
              }else if(mPS2idExt.support.wheel){
                return;
              }
              if(!mPS2idExt.needScroll((mPS2idData.layout==="horizontal" ? e.deltaX : e.deltaY))){ //check if normal scrolling is needed to reach adjacent targets
                if($(mPS2idExt.selector).length) e.preventDefault();
                doc.trigger("ps2id-scrollSection",((e.detail<0 || e.wheelDelta>0 || e.deltaY < 0 || e.deltaX < 0) ? 1 : -1));
              }
            };
          }).trigger("ps2id-wheel-init");
        });
        
      })(jQuery);');
    endif;
  }
}

function ps2id_mw_get_pages(){
  //get pages ids as array
  $pages_arr = array();
  foreach(ps2id_mousewheel_options('ps2id_mousewheel_pages') as $k => $v) {
    $pages_arr[] = $k;
  }
  return $pages_arr;
}
/* ---------------------------------------- */

add_filter('cli_show_cookie_bar_only_on_selected_pages', 'webtoffee_custom_selected_pages', 10, 2);

function webtoffee_custom_selected_pages($html, $slug) {

    $slug_array = array('landing-page');
    if (in_array($slug, $slug_array)) {
        $html = '';
        return $html;
    }

    // For wild card URL entry
    foreach ($slug_array as $slug_ar) {
        if (strpos($slug_ar, '*') !== false) {

            if (fnmatch($slug_ar, $slug)) {
                $html = '';
                return $html;
            }
        }
    }

    return $html;
}

The target is a Single Post template on Elementor and ideally I would like it to effect all posts using this template without having to add in each specific post ID.

Is this possible?

• This reply was modified 3 years, 5 months ago by spinach.

@oonaghstaerckdesign Hey! I should probably have mentioned it before (sorry!) but there are 3 places in the script with the line:

if(is_single( $pages_arr ) || is_page( $pages_arr )) :

You just need to change all 3 occurrences with the code I posted (you’ve changed only the first one).

Try it and let me know ??

Hey @malihu

Thanks so much for getting back to me to let me know. Really appreciate the time you’re taking to help me out with this.

I have replaced all 3 instances in the code now but it is still not working on the posts using the post template sadly.

Any ideas?

Ah I see. You need to set the target sections in the script.

Find this line:

$sections_arr = in_array($page_id, $pages_arr) ? ps2id_mousewheel_options('ps2id_mousewheel_pages')[$page_id] : null;

and add the target sections you have on your page that you want to scroll to via the mousewheel like this:

$sections_arr = in_array($page_id, $pages_arr) ? ps2id_mousewheel_options('ps2id_mousewheel_pages')[$page_id] : array('#section-1', '#section-2', '#section-3', '#section-4');

Change the values in the array to your target sections.

Hey @malihu

It works!! Thank you so much for your help. Amazing support.

Does this apply across the whole site now if the section is tagged with the section ID? (ie. Do I still need to keep this code above?

//Design Page ID
      '12'    =>  array(
        //And its target section IDs
        '#section1', 
        '#section2',  
      ),

      //Project Template ID
      '324'    =>  array(
        //Target Section IDs
        '#section1', 
        '#section2', 
        '#section3',
      ),

Awesome ??

If you don’t want the functionality to apply to specific pages like 12, 324 etc. with different/specific sections, you don’t need the code.

I’ll try to update the custom script at some point to make adding the mousewheel functionality on all posts, templates etc. much easier, so thanks a lot for the feedback!

Let me know if you need anything else.