[英]Transform() div not working correctly on click
我已經在wordpress中創建了該頁面,它在mousewheel事件上一次加載了每個部分,在mousewheel事件上,transform屬性正常工作。
但是,當我綁定click事件進行轉換時,每次單擊都會將其轉換為屏幕底部的div,然后轉到該部分。
請查看此鏈接: 單擊此處
當您單擊右上方菜單欄中的“推薦書”時,它將在屏幕底部,然后在“推薦書”部分向上移動單詞。
我在點擊時使用以下代碼:
jQuery( window ).on( "load", function($) {
//go to specific slider on menu click
var item = document.getElementsByClassName("scroll-custom-js");
jQuery.each( item, function( i, val ) {
this.addEventListener("click",function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
gotoSlide(link);
});
});
});
var gotoSlide = function () {
document.querySelector(sliderElement).style.transform = 'translate3d(0, ' + -(currentSlide - 1) * 100 + '%,0)';
document.querySelector(sliderElement).style.transition = 'transform 1000ms ease 0s';
});
在jQuery中:
jQuery('a.scroll-custom-js').click(function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
e.preventDefault();
var move_slides = jQuery(link).attr('data-slider-index');
move_slides = move_slides - 1;
jQuery('.slides_custom').css({
transform: 'translate3d(0, ' + -(move_slides) * 100 + '%,0)',
});
});
使用unbind()
刪除綁定到該div的所有click事件
jQuery('a.scroll-custom-js').unbind('click').click(function(e){
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.