内部引导程序模式滚动到特定元素不起作用
我使用了boostrap modal.in，我们需要使用滚动到特定元素。我尝试使用下面的代码。但是不起作用
$('#centralModalLg').on('show.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
已更新：
当我第一次打开模式窗口并滚动到特定区域时，请看下面的屏幕截图
第二次打开模式时。 scoll应该到达顶部，但我上次停下来了。
HTML：
<div class="modal fade" id="centralModalLg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" [ngClass]="{ 'modal-lg': productDetails?.imageUrl != null, 'modal-md': productDetails?.imageUrl == null}" role="document">
<!--Content-->
<div class="modal-content" *ngIf="productDetails">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<button *ngIf="productDetails.imageUrl != null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>{{productDetails?.productName}}
<span>
<img *ngIf="!productDetails?.isVeg" alt="trending" class="w24" src="https://www.crashmeal.com/assets/images/icons/trending-m.png">
</span>
<span>
<img *ngIf="productDetails?.isVeg" alt="veg" class="w24" src="https://www.crashmeal.com/assets/images/icons/veg-m.png">
</span>
</h4>
<div id="elementId" class="over-flow-md">
<img *ngIf="productDetails.imageUrl != null" class="card-img-top" src="{{baseLogoUrl + productDetails?.imageUrl}}" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16654384883%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16654384883%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7265625%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<button *ngIf="productDetails.imageUrl == null" type="button" id="closeProductModal" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- <hr /> -->
<p class="small pt-2">
{{ productDetails?.productDesc }}
</p>
<hr />
<div class="addons" *ngFor="let addonCate of productDetails?.addonsCategoryDataList;let addonIndex=index">
<h5 class="bg-light">{{addonCate.CategoryType}}</h5>
<div class="row pb-1">
<div class="small col-12"><strong>{{addonCate?.addonsCategoryName}}({{addonCate?.addonsCategoryDesc}}) </strong>
<span *ngIf="addonCate.addonType == 'required'" class="float-right pr-2 required">Required</span></div>
<div id="errorElement" *ngIf="addonCate?.hasError" class="small col-12 form-error">{{addonCate?.errorMsg}}</div>
</div>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection > 1 || addonCate?.maxNoOfSelection == null">
<li class="list-group-item px-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<label class="checkbox-inline checkbox">
<input class="form-check-input float-left mr-2" name="{{addonCateList.addonsCategoryEntryId}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'checkbox')" [(ngModel)]="addonCateList.checkedValue" type="checkbox" value="option1" >
<span class="checkmark"></span>
<div class="checkbox-text">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
</div>
</label>
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
<ul class="list-group mb-3" *ngIf="addonCate?.maxNoOfSelection == 1">
<li class="list-group-item pr-0 d-flex justify-content-between lh-condensed" *ngFor="let addonCateList of addonCate?.addonsCategoryEntries;let addoncateIndex=index">
<div class="col-md-7 align-self">
<h6 class="my-0">{{addonCateList.addonsCategoryEntryName}}</h6>
<input class="form-check-input" name="{{addonCate.CategoryType}}" (change)="addOnAddRemove(addonIndex,addoncateIndex,addonCateList, $event,'radio')" [checked]="addonCateList.checkedValue" type="radio">
</div>
<div class="col-md-2 align-self text-right">
$ {{addonCateList.addonsCategoryEntryPrice}}
</div>
<div class="col-md-3 addprice">
<ng-container *ngIf="addonCateList.maxNoOfSelection > 1 || addonCateList.maxNoOfSelection == null">
<button [disabled]="addonCateList.maxNoOfSelection == addonCateList.quantity" (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'add')" class="btn-addRemove float-right" type="button"> <i class="fa fa-plus small"></i> </button>
<input class="form-control input-addRemove float-right" min="{{addonCateList.minNoOfSelection}}" max="{{addonCateList.maxNoOfSelection}}" name="addonCateList_qty" [(ngModel)]="addonCateList.quantity" readonly type="number" aria-label="number" />
<button (click)="addonQuantityUpgrade(addonIndex, addoncateIndex, addonCateList, 'sub')" class="btn-addRemove float-right" type="button"> <i class="fa fa-minus small"></i> </button>
<span id="errorElement" *ngIf="addonCateList.hasError">{{addonCateList.errorMsg}}</span>
</ng-container>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="py-2">
<input class="form-control" name="specialInstr" [(ngModel)]="productDetails.specialInstr" type="text" placeholder="Add Special Instructions for the Restaurant">
</div>
<hr />
<div class="row addprice">
<div class="price col-sm-7">Choose Quantity</div>
<div class="text-right col-sm-2 ">
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.cost">{{productDetails.cost}}</ng-container>
<ng-container *ngIf="!productDetails?.cost || productDetails.cost == null">0</ng-container>
</strong>
</div>
<div class="text-right col-sm-3 ">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'add')" type="button"> <i class="fa fa-plus small"></i> </button>
<input readonly class="form-control input-addRemove float-right ng-untouched ng-pristine ng-valid" aria-label="number" min="1" name="quantity" [(ngModel)]="productDetails.quantity" type="number">
<button class="btn-addRemove float-right" (click)="increase_decrease_qty(productDetails,'sub')" type="button"> <i class="fa fa-minus small"></i> </button>
</div>
</div>
</div>
<div class="bg-light p-0 pb-2">
<div class="row">
<div class="col-md-6">
<div class="mt-3 pl-3">
<span class="pr-1">Total:</span>
<strong>{{outletDetials?.currency}}
<ng-container *ngIf="productDetails?.totalPrice">{{productDetails.totalPrice}}</ng-container>
<ng-container *ngIf="!productDetails?.totalPrice || productDetails.totalPrice == null">0</ng-container>
</strong>
</div>
</div>
<div class="col-md-6">
<button [disabled]="add_cart_loading == 'adding'" type="button" (click)="addProductToCart(productDetails)" class="btn btn-primary pull-right mt-2 mr-4">
<span *ngIf="add_cart_loading != 'adding'">
<ng-container *ngIf="!update_product_status"> Add to Cart </ng-container>
<ng-container *ngIf="update_product_status">Update</ng-container>
</span>
<span *ngIf="add_cart_loading == 'adding'">
<ng-container *ngIf="!update_product_status">Adding</ng-container>
<ng-container *ngIf="update_product_status">Updating</ng-container>
<i class="fa fa-spinner fa-spin"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
我如何实现这一目标
预先感谢
3 个答案:
答案 0 :(得分：6)
在使用引导程序3或4时，将“显示”更改为“显示”
$('#centralModalLg').on('shown.bs.modal', function() {
$( "#elementId" ).scrollTop(0);
});
答案 1 :(得分：2)
$('#centralModalLg').on('shown.bs.modal', function() {
$('#elementId').scrollTop(0);
});
带有您的代码的Fiddle。
编辑： 问题是由事件监听器引起的，应该是 shown.bs.modal 而不是 show.bs.modal ，并且还更新了提琴。
如果自Bootstrap的官方文档起事件开始但尚未完成，则jQuery.scrollTop（）可能会发生冲突：
不定式（例如show）在事件开始时触发，并且 其过去分词形式（如所示）在完成时触发 一个动作。
答案 2 :(得分：2)
尝试一下：
$('#centralModalLg').on('show.bs.modal', function() {
setTimeout(function() {
var $elem = $('#scrollto') // add this ID to an element you want scroll to
var $container = $("#elementId")
$container.scrollTop(0) // edge case - reset scroll in case it is reopened
var t = $container.offset().top
$container.scrollTop($elem.position().top - t);
}, 500) // run after modal animation
});
它基于以下答案：https://stackoverflow.com/a/21179878/8164758
这是工作中的jsfiddle示例：https://jsfiddle.net/954jnt2y/1/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？