Horizontal Scrolling with Mouse Wheel in Oxygen

This tutorial provides the steps to apply CSS-Trick’s Scroll Page Horizontally With Mouse Wheel in Oxygen on a Section having the Gallery component.

Note: Vertical scrolling does not continue past the Section once the horizontal scrolling of the content (the Gallery in this case) has reached the end. If that is needed, follow this tutorial (members-only) instead.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master.

Upload jquery.mousewheel.min.js to the plugin’s assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

if ( is_page( 'sample-page' ) ) {
    wp_enqueue_script( 'jquery-mousewheel', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.mousewheel.min.js', [ 'jquery' ], '3.1.13', true );
}

Replace is_page( 'sample-page' ) depending on where you want to load the jQuery Mouse Wheel plugin.

Step 2

In the Oxygen editor and add a Section.

[Optional] Advanced > Size & Spacing > Section Container Width: full-width.

Advanced > Layout > Overflow: scroll.

Add your desired elements that wish to be scrolled horizontally with the mouse wheel inside the Section. In this example, let’s add a Gallery.

Add a Gallery component inside the Section. Browse and select your desired images.

Layout > Image Min Width: 300px (or any other width of your choice).

Advanced > Layout > Display: flex
Flex Wrap: nowrap

Add a Code Block below the Gallery inside the Section.

PHP & HTML:

<?php
	// echo "hello world!";
?>

JavaScript:

(function($) {

	$('#section-307-2').on('mousewheel', function(event, delta) {
		this.scrollLeft -= (delta);

		event.preventDefault();
	});

}(jQuery));

Replace section-307-2 with the ID of your Section.