jQuery fullpage.js 全屏滚动插件取消鼠标滚动事件，点击菜单栏定位显示页面。

问题：项目中遇到一个页面，使用了全屏滚动插件，如下有4屏画面。使用了 fullpage.js，现在想要取消通过鼠标滑轮滚动来定位页面的功能，只通过点击左侧菜单栏来实现的定位页面。

(此处前提条件是，原来的鼠标事件有效，同时点击左侧菜单栏也能实现定位de)

js:

$('#fullpage').fullpage({
 		onLeave: function(index, nextIndex, direction) {
			var idName = "menu-count-" + index;
			var nextIdName = "menu-count-" + nextIndex;
			$('#' + idName).removeClass("active_menu");
			$('#' + nextIdName).addClass("active_menu");
			 ;
		}, 
		anchors: ['Wfgs2010_1', 'Wfgs2010_2', 'Wfgs2010_3', 'Wfgs2010_4'],
		autoScrolling: false,
	})

扫描二维码关注公众号，回复： 3559849 查看本文章

(此处前提条件是，原来的鼠标事件有效，同时点击左侧菜单栏也能实现定位)

autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条

通过查找资料。此属性 autoScrolling 可以禁止插件的滚动方式。但是，设置为false后，鼠标滚动事件被禁止，但是点击菜单按钮，没有发生跳转。

js:

$('#fullpage').fullpage({
 		onLeave: function(index, nextIndex, direction) {
			var idName = "menu-count-" + index;
			var nextIdName = "menu-count-" + nextIndex;
			$('#' + idName).removeClass("active_menu");
			$('#' + nextIdName).addClass("active_menu");
			 ;
		}, 
		anchors: ['Wfgs2010_1', 'Wfgs2010_2', 'Wfgs2010_3', 'Wfgs2010_4'],
		autoScrolling: false,
	})

通过对比 autoScrolling: false, autoScrolling: true时页面发生的变化。

autoScrolling: true时：滑动后通过对比页面发生的变化，发现会改变t ransform: translate3d(0px, -609px, 0px); 属性来控制指定页面的显示。

autoScrolling: false时：会发现点击菜单但是 ransform: translate3d(0px, 0px, 0px); 不会发生改变。

所以解决办法：在js控制点击菜单时显示的页面范围。（感觉会有更好的办法，暂且只有如此解决）

控制translate3d(0px, 0px, 0px)属性。

function menuClick(){
	$('#menu-count-1').on('click', function() {
		$('#fullpage').css("transform","translate3d(0px, 0px, 0px)");
	});
	$('#menu-count-2').on('click', function() {
		$('#fullpage').css("transform","translate3d(0px, -609px, 0px)");
	});
	$('#menu-count-3').on('click', function() {
		$('#fullpage').css("transform","translate3d(0px, -1218px, 0px)");
	});
	$('#menu-count-4').on('click', function() {
		$('#fullpage').css("transform","translate3d(0px, -1827px, 0px)");
	});
}

jQuery fullpage.js 全屏滚动插件取消鼠标滚动事件，点击菜单栏定位显示页面。

猜你喜欢