内部引导模式滚动到特定元素不起作用

【问题标题】：Inside bootstrap modal scroll to specific element is not working内部引导模式滚动到特定元素不起作用
【发布时间】：2019-06-02 02:49:21
【问题描述】：

我使用了 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">&times;</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">&times;</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>

我怎样才能做到这一点

提前致谢

【问题讨论】：

  • $('#centralModalLg').on('.show.bs.modal', function() { $( "#elementId" ).scrollTop(0); });您是否缺少上述代码中的#elementId 和 .show.bs.modal
  • 抱歉，这是类型错误。我只尝试过这种方式 "$( "#elementId" ).scrollTop(0);"
  • 您能否添加 html 并向我们展示您想要的内容。
  • 添加你的html代码
  • @UdaraKasun 更新

标签： javascript jquery bootstrap-4 bootstrap-modal


【解决方案1】：

你什么时候使用 bootstrap 3 或 4 时将“show”改为“shown”

$('#centralModalLg').on('shown.bs.modal', function() {
        $( "#elementId" ).scrollTop(0);
});

check that Bootstrap 3 codepen example

check that Bootstrap 4 codepen example

【讨论】：

  • 我改了答案希望对你有帮助
【解决方案2】： 
$('#centralModalLg').on('shown.bs.modal', function() {
    $('#elementId').scrollTop(0); 
});

带有您的代码的Fiddle。

编辑： 问题是由事件监听器引起的，应该是 shown.bs.modal 而不是 show.bs.modal，同时更新了 fiddle。

jQuery.scrollTop() 如果事件已开始但截至Bootstrap 的官方文档尚未完成，则可能会发生冲突：

不定式（例如 show）在事件开始时触发，并且 它的过去分词形式（例如所示）在完成时触发 一个动作。

【讨论】：

  • 我已将 css 中的滚动溢出添加到此元素
    。所以你的解决方案不起作用
  • 在这种情况下你能上传你的css吗？
  • .over-flow-md{ 最大高度：355px;溢出：隐藏；溢出-y：自动；右边距：-10px； padding-right: 10px; }
  • 更新小提琴。
  • 对您有帮助吗？
【解决方案3】：

试试这个：

$('#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/

【讨论】：

  • 声明变量'main'的地方
  • 好像是复制粘贴
  • @Robert 它正在工作我已经对其进行了测试，只需将 #scrollto id 添加到模态容器内的元素中。是的，它主要是复制和粘贴，这就是我链接原始答案的原因，只是稍作修改以适合您的情况！
  • 你检查你的ans，似乎你声明变量'main'的地方？？
  • @Robert 是的，很糟糕。我修正了我的答案
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode