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

时间:2024-04-05 12:50:56

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

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

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

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

jQuery 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,
	})

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

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

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

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

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

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

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); 属性来控制指定页面的显示。

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

jQuery fullpage.js 全屏滚动插件取消鼠标滚动事件,点击菜单栏定位显示页面。 autoScrolling: false时: 会发现点击菜单但是  ransform: translate3d(0px, 0px, 0px);  不会发生改变。

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

 所以解决办法:在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)");
	});
}