点击单选按钮页面滚动至网格顶部，如何阻止该滚动行为？

点击页面内网格中的单选按钮时，页面会滚动至网格顶部。已尝试将position属性从absolute改为relative、添加top:auto，但均无效，求解决方法！

HTML代码 #

<div>
<section class="top-table  head-row-2">
<div class="grid fixed-head head-row-2" style="height: 130px">
  <table class="tblAlienQuestions">
    <thead>
      <tr class="header">
        <th class="spacehh type1"><div><span>Type</span></div> </th>
        <th class="spacehh type2"><div><span>Is Anyone in the<br />Household?</span></div></th>
        <th class="spacehh type3"><div><span>Remove</span></div></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let alien of ActiveDetail; let i = index" class="{{getStatusType(alien?.status)}}" [ngClass]="{'rowdisabled': DisableEnableQuestionListRows(alien)  }">
        <td (click)="OnSelectAlienType(alien,i, '')">{{alien?.QuestionText}}</td>
        <td>
          <span *ngIf="alien?.HhMember != ''" (click)="OnSelectAlienType(alien,i, 'DETAIL')">
            {{alien?.HhMember}} &emsp;&emsp;
          </span>

          <span *ngIf="alien?.HhMember != '' && alien?.isDocSufficientFlag ==true" (click)="OnSelectAlienType(alien,i, 'DETAIL')">
            <span class="fa fa-check" style="color: green"></span>
          </span>

          <span *ngIf="alien?.HhMember != '' && alien?.isDocSufficientFlag ==false" (click)="OnSelectAlienType(alien,i, 'DETAIL')">
            <span class="fa fa-exclamation" style="color: yellow"></span>
          </span>
          <span *ngIf="EdicSummary != alien?.AlienQuestionEdicName && alien?.HhMember == '' "><input type="radio" value="Y" [(ngModel)]="alien.HasThisCondition" (click)="OnSelectAlienType(alien,i,'Y')" name="HasCondition{{i}}">YES &emsp;&emsp;&emsp;&emsp;</span>

          <span *ngIf="EdicSummary != alien?.AlienQuestionEdicName && alien?.HhMember == '' "><input type="radio" value="N" [(ngModel)]="alien.HasThisCondition" (click)="OnSelectAlienType(alien,i, 'N')" name="HasCondition{{i}}">NO </span>
          
          <span *ngIf="EdicSummary == alien?.AlienQuestionEdicName" (click)="OnSelectAlienType(alien,i, '')">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
        </td>
        <td class="text-center verify-checkbox">
          <span *ngIf="alien?.HhMember != '' && alien.HasThisCondition != null" (click)="IsRemoveEdic(alien)"><input type="checkbox" [(ngModel)]="alien.IsRemoveEdic" [checked]="alien.IsRemoveEdic" name="IsRemoveEdic" /></span>
          <span *ngIf="alien.HasThisCondition == null"></span>
          
          <span *ngIf="EdicSummary == alien?.AlienQuestionEdicName" (click)="OnSelectAlienType(alien,i, '')">&emsp;&emsp;&emsp;&emsp;&emsp;</span>
        </td>
      </tr>

    </tbody>
  </table>
</div>

CSS代码 #

input[type='checkbox'] {
  opacity: 1;
  position: relative;
}

input[type='radio'] {
  opacity: 1;
  position: relative;
}

.type1 {
  width:60%;
}

.type2 {
  width: 30%;
}

.type3 {
  width: 10%;
}

.rowdisabled {
  color: #89aeb7 !important;
  pointer-events: none;
  cursor: not-allowed;
  background-color: #eeeeee !important;
}

.tblAlienQuestions {
  font-family: Lato-Regular,Arial !important;
  color: black !important;
  font-size:13px;
  font-weight: bold !important;
}

触发逻辑代码（OnSelectAlienType） #

OnSelectAlienType(activeRecord: AlientypeQuestionList, index: number, selected :string) {
    if (!IsNullorEmptyString(selected)) {
      activeRecord.HasThisCondition = selected;
    }
    else if (activeRecord.HasThisCondition == "N") {
      selected = "Select";
    }
       
    else if (!IsNullorEmptyString(activeRecord.HhMember)) {
      selected = "DETAIL";
    }
    
    switch (selected) {
      case "Y": {
        this.addButtonEnable = true;
        activeRecord.Flag = SelectedAlienCondition.AddYesVal;
        if (IsNullorEmptyString(activeRecord.HasThisCondition)) {
          activeRecord.HasThisCondition = "Y";
        }
        break;
      }
      case "N": {
        this.addButtonEnable = true;
        activeRecord.Flag = SelectedAlienCondition.AddNoVal;
        if (IsNullorEmptyString(activeRecord.HasThisCondition)) {
          activeRecord.HasThisCondition = "N";
        }
        break;
      }
      case "DETAIL": {
        if (activeRecord.HhMember && activeRecord.HhMember != "") {
          activeRecord.Flag = SelectedAlienCondition.DetailVal;
          activeRecord.HasThisCondition = "Y";
          this.setAddButtonEnable();
        }
        else {
          activeRecord.Flag = SelectedAlienCondition.Select;
        }
        break;
      }
      default: {
        this.addButtonEnable = true;
        if (activeRecord.AlienQuestionEdicName == immigrationedicnames.SUMM) {
          activeRecord.Flag = "SUMM";
        } else {
          activeRecord.Flag = SelectedAlienCondition.Select;
        }       
      }
    }    
    this.AddAlienIndividual.emit(activeRecord); 
  }

解决方法 #

• 阻止事件冒泡与默认行为：
  单选按钮的点击事件会向上冒泡到父级<td>，触发父元素的点击逻辑，同时浏览器可能触发默认滚动行为。修改单选按钮的点击事件，添加事件阻止：

  <input type="radio" value="Y" [(ngModel)]="alien.HasThisCondition" 
         (click)="OnSelectAlienType(alien,i,'Y'); $event.preventDefault(); $event.stopPropagation()" 
         name="HasCondition{{i}}">YES
  

  同理修改NO选项的单选按钮。

• 改用change事件替代click事件：
  单选按钮的状态变化更适合用change事件，避免点击时的不必要触发，同时减少冒泡带来的影响：

  <input type="radio" value="Y" [(ngModel)]="alien.HasThisCondition" 
         (change)="OnSelectAlienType(alien,i,'Y')" 
         name="HasCondition{{i}}">YES
  

• 检查父元素点击逻辑：
  父级<td>绑定了(click)="OnSelectAlienType(alien,i, '')"，当点击单选按钮时，事件冒泡会触发这个方法。若该方法内存在导致滚动的逻辑（比如修改DOM结构引发重排、自动聚焦操作等），需要排查并调整。

• 排查fixed-head类样式：
  网格容器使用了fixed-head类，该类可能包含滚动相关的CSS属性（如overflow: auto）或JS逻辑（如自动设置scrollTop），检查该类的样式及关联脚本是否存在自动滚动到顶部的逻辑。

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