當用戶點擊滾動頁面的錨點鏈接時，是否可以禁用.scroll功能？

我的工作時間表頁面上，並想創建一個類似的年本頁面右邊的列表中選擇一個功能：https://www.mikebloomberg.com/about/當用戶點擊滾動頁面的錨點鏈接時，是否可以禁用.scroll功能？

我有一個click事件設置添加周圍的日期了一圈邊框用戶選擇它並在選擇其他日期時將其刪除。使用此viewport plugin，我也有我的頁面設置，以便在當前屏幕上顯示的年份/日期周圍出現圓形邊框。

我遇到的問題是，當用戶單擊一年並且頁面滾動到正確的錨點時，圓形邊框會在列表中每年出現並消失，直到它出現在正確的年份。所以基本上點擊也是關閉滾動功能。

我想要做的是停止用戶單擊時發生的滾動功能，但一旦頁面滾動到正確的位置後再次啓動。任何想法或建議，將不勝感激！

腳本滾動功能：

 $(window).scroll(function(){ 
      if($("#intro:in-viewport").length > 0){ 
       $('.tNavIntro').css({border: '2px solid #50b855'}); 
       $('.tNav2012').css({border: ''}); 
      } 

      else if($("#time2012:in-viewport").length > 0){ 
       $('.tNav2012').css({border: '2px solid #50b855'}); 
       $('.tNavIntro').css({border: ''}); 
       $('.tNav2013').css({border: ''}); 
      } 

      else if($("#time2013:in-viewport").length > 0){ 
       $('.tNav2013').css({border: '2px solid #50b855'}); 
       $('.tNavIntro').css({border: ''}); 
       $('.tNav2012').css({border: ''}); 
       $('.tNav2015').css({border: ''}); 
      } 

      else if($("#time2015:in-viewport").length > 0){ 
       $('.tNav2015').css({border: '2px solid #50b855'}); 
       $('.tNavIntro').css({border: ''}); 
       $('.tNav2013').css({border: ''}); 
       $('.tNav2016').css({border: ''}); 
      } 

      else if($("#time2016:in-viewport").length > 0){ 
       $('.tNav2016').css({border: '2px solid #50b855'}); 
       $('.tNavIntro').css({border: ''}); 
       $('.tNav2015').css({border: ''}); 
      } 
     });

對於點擊功能：

$('.timeLineNavWrap div').on('click', function(){ 
     $('div.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
    });

這是我最後套結的點擊=假線到功能，落實到位作爲工作從頂部的url中獲取錨鏈的＃鏈接：

$(document).ready(function(){ 
    $('.link').on('click',function (e) { 
     $('html, body').stop().animate({ 
      'scrollTop': $($(this).attr('rel')).offset().top 
     }, 900, 'swing', function() { 
      clicked = false; 
     }); 
    }); 
});

來源

2016-03-01 Kristen Vogler

在您的點擊函數，您可以設置某種全局狀態變量來跟蹤用戶是否單擊。如果是，您可以禁用滾動功能。（只需將其包裝在if (!clicked)中。）完成後，將該變量設置爲false並手動調用滾動功能。

在代碼：

var clicked = false; 
$('.timeLineNavWrap div').on('click', function(){ 
    clicked = true; 
    $('div.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
    // Is there some other code here that scrolls? 
    clicked = false; 
    $(window).scroll(); 

}); 

$(window).scroll(function(){ 
    if (!clicked) { 
     if($("#intro:in-viewport").length > 0){ 
      $('.tNavIntro').css({border: '2px solid #50b855'}); 
      $('.tNav2012').css({border: ''}); 
     } 
     # etc 
    } 
});

來源

2016-03-01 21:47:31 Scimonster

沒有第二clicked = false，在點擊功能，這沒有運行該滾動腳本的工作。然而，在頁面滾動到正確的位置之前，在頁面結尾處添加clicked = false會使其返回，因此您仍然可以看到邊框圓圈每年出現和消失導致點擊一次的相同結果。 –

它必須根據您的特定代碼進行調整，但這是一般想法。 – Scimonster

我最終將一個函數添加到動畫元素的末尾，以添加clicked = false，並且做了這個訣竅。謝謝你的幫助。 –

您可以使用jQuery .off()功能刪除您的滾動事件偵聽器。

假設.button是您去除滾動

$('#button').on('click', function(){ 
     $(window).off('scroll'); 
});

之後，你可以重新初始化在需要的位置（在功能上更好的包裹初始化）您的滾動處理程序按鈕。

你可以用下面的函數獲取當前的滾動位置：

$(window).on("scroll", function(){ 
    console.log($(document).scrollTop()) 
})

你可以得到元素的位置在頁面.offset()，但你只需要在top返回的對象屬性。

$("#button").offset().top

所以之後，你只需要這兩個值貼在窗口scroll事件的功能進行比較。

現在更清楚了嗎？

來源

2016-03-01 21:55:02

這絕對是關閉它的工作，這是偉大的，你有建議如何重新打開它？ –

@KristenVogler我編輯了我的答案。 –

當用戶點擊滾動頁面的錨點鏈接時，是否可以禁用.scroll功能？

回答

相關問題