Blazor WebAssembly移动端滚动事件：仅用C#实现滚动方向判断

你可以通过监听Blazor的触摸事件（ontouchstart和ontouchend），记录触摸起始与结束的Y坐标差值来判断滚动方向，完全用C#实现，不需要依赖JavaScript。

实现步骤 #

1. 定义组件状态变量
   维护触摸起始坐标和滚动状态：

   private bool _isScrolledDown;
   private int _touchStartY;
   

2. 绑定事件到目标元素
   将触摸事件和桌面端滚轮事件绑定到需要切换类的元素上：

   <div class="@(_isScrolledDown ? "scrolled-down" : "")"
        @onwheel="HandleWheel"
        @ontouchstart="HandleTouchStart"
        @ontouchend="HandleTouchEnd">
       <!-- 你的组件内容 -->
   </div>
   

3. 实现触摸事件处理逻辑
   通过对比触摸起始和结束的Y坐标差值判断滚动方向，加入阈值避免误触：

   private void HandleTouchStart(TouchEventArgs e)
   {
       // 记录第一个触摸点的起始Y坐标
       if (e.Touches.Length > 0)
       {
           _touchStartY = (int)e.Touches[0].ClientY;
       }
   }
   
   private void HandleTouchEnd(TouchEventArgs e)
   {
       if (e.ChangedTouches.Length > 0)
       {
           int touchEndY = (int)e.ChangedTouches[0].ClientY;
           int deltaY = touchEndY - _touchStartY;
   
           // 对应桌面端DeltaY逻辑：
           // deltaY < -20 → 手指向上滑动，页面向下滚动（类似滚轮向下）
           // deltaY > 20 → 手指向下滑动，页面向上滚动（类似滚轮向上）
           if (deltaY < -20)
           {
               _isScrolledDown = true;
           }
           else if (deltaY > 20)
           {
               _isScrolledDown = false;
           }
           StateHasChanged();
       }
   }
   

4. 保留桌面端滚轮逻辑
   沿用你已实现的桌面端功能：

   private void HandleWheel(WheelEventArgs e)
   {
       if (e.DeltaY > 0)
       {
           _isScrolledDown = true;
       }
       else if (e.DeltaY < 0)
       {
           _isScrolledDown = false;
       }
   }
   

关键说明 #

• 阈值设置：±20的阈值用于过滤触摸时的微小抖动，避免类频繁切换，可根据实际需求调整数值。
• 触摸点选择：Touches包含当前所有触摸点，ChangedTouches仅包含触发当前事件的触摸点，在ontouchend中使用ChangedTouches更准确。
• 状态更新：触摸事件可能在Blazor自动渲染周期外，需手动调用StateHasChanged()通知组件更新UI。

内容的提问来源于stack exchange，提问作者Robur