jQuery 移除 window 滾動事件綁定：unbind 與 off 的正確用法

問題

如何移除通過 $(window).scroll(function() { ... }) 綁定的滾動事件處理器？

核心方法

1. 移除所有 scroll 處理器（暴力）

$(window).unbind('scroll');
// 或 jQuery 1.7+
$(window).off('scroll');

適用於：不需保留任何 scroll 綁定、或頁面銷毀前清理。

2. 移除特定處理器（精準）

**前提：綁定時使用具名函數，而非匿名函數。**

function handleScroll() {
    console.log('scrolling...');
}

// 綁定
$(window).scroll(handleScroll);
// 或
$(window).on('scroll', handleScroll);

// 移除
$(window).unbind('scroll', handleScroll);
// 或
$(window).off('scroll', handleScroll);

3. 移除特定命名空間下的處理器（模塊化）

$(window).on('scroll.myModule', handleScroll);
// 後續移除
$(window).off('scroll.myModule');

完整示例：3 秒後移除其中一個處理器

function func1() { console.log(1); }
function func2() { console.log(2); }

$(window).scroll(func1);
$(window).scroll(func2);

setTimeout(function () {
    // 僅移除 func1，func2 繼續生效
    $(window).off('scroll', func1);
}, 3000);

常見坑點

• 匿名函數無法移除：$(window).scroll(function(){...}) 綁定後，無法通過引用移除，只能 off('scroll') 全清。
• 綁定上下文不一致：若綁定時用 .bind(this) 或箭頭函數，移除時必須傳遞**完全相同的函數引用**（即綁定前的原函數變量），而非調用 .bind(this) 後的新函數。
• jQuery 版本差異：unbind 為舊版 API，off 為 1.7+ 推薦統一 API，兩者行為一致。

最佳實踐

1. **始終使用具名函數** 綁定事件，便於後續精確移除。
2. 模塊化代碼時，**使用事件命名空間**（如 scroll.myPlugin），一鍵清理模塊相關綁定。
3. 在組件銷毀/頁面卸載時（Vue beforeDestroy、React useEffect cleanup、jQuery $(window).on('beforeunload')），調用 off 清理，防止內存洩漏與重複觸發。

掌握 on/off 與具名函數、命名空間的配合，即可靈活控制滾動事件的生命週期。