TransWikia.com

Scroll dentro de un modal jQuery

Stack Overflow en español Asked by Roberto Arguello on February 18, 2021

Tengo un gran problema y no encuentro como solucionarlo.
Bueno consiste en, no se si han visto algunas programas o paginas que cuando haces scroll se habilita un botón?. Ese es mi caso lo que quiero hacer es al momento de llegar al tope del scroll dentro del modal habilitar un botón para continuar con el proceso pero no logro como ejecutarlo u.u
Las librerias que utilizo son bootstrap 3 y jquery.

Ahora bien en el archivo html donde tengo el modal construido asi:

<!-- Modal -->
<div id="modalproducts" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <div class="row scrollmodal" id="scrollprueba">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h1>Lista de productos</h1>
                        <p id="startrestrictmodal">As COVID-19 continues to affect our day-to-day life, online retailers have an increasingly important role to play. We're acutely aware of our responsibilities and we're doing everything we can to ensure you get the items</p>
                        <p>At Gearbest, we hope you remain safe and healthy during this outbreak. It is our duty to offer a satisfying shopping experience for all of our valued customers as always. Light is at the end of the tunnel, so let's stay strong and patient during these special times. Gearbest will be still here to do our best to support you.</p>
                        <p>The following are FAQs for order and delivery that customers care about during the coronavirus epidemic.</p>
                        <h3>Q1. Will my package be delivered?</h3>
                        <p>Of course will, Gearbest's activities are currently continuing. However, delivery times may be longer than usual and our selection of items available for international shipping may be temporarily reduced.</p>
                        <h3>Q2. How long does it take to ship my package?</h3>
                        <p>The delivery time of the goods is determined by the product and the delivery area. Due to the impact of the epidemic, the overall shipping time has been delayed to varying degrees than before. You can find updated delivery times on the product detail page for each item. We will do our best to deliver your items as soon as possible and notify you by email. Our local warehouses stock goods are delivered faster.</p>
                        <h3>Q3. Will my package be infected?</h3>
                        <p>It's safe to order from Gearbest. We are taking extra precautions at the packing process, each package is disinfected before leaving our warehouse to ensure safe product and delivery for you.</p>
                        <h3>Q4. What's the status of my order and delivery?</h3>
                        <p>Once your order has been shipped out we will send you a shipping confirmation email that includes your tracking number. To check the status of your package, please click on the link and it will take you to the UPS, FedEx or other shipping vendors website. This function allows you to track your package using the tracking code provided in the email. You can also track your order in My account>> "My Orders".</p>
                        <h3>Q5. Can I change the address on my order?</h3>
                        <p>You can change the delivery address for an order until it ships. Once your order has shipped, you can find tracking information in your order details. If an order includes multiple items, each may have separate delivery dates and tracking information. You can also sign up to receive notification about your order here.</p>
                        <h3>Q6. Is it possible to reduce contact with the deliveryman?</h3>
                        <p>Yes. Gearbest's delivery partners have been advised to reduce contact with customers by placing packages at the customer's doorstep and stepping back. If an ID check is required, these are now performed at a distance. You can also choose a safe location where the deliveryman can leave your package if you are not able to answer the door.</p>
                        <h3>Q7. What actions is Gearbest taking during the COVID-19 Epidemic?</h3>
                        <ul>
                        <li>We are working hard to provide certified sanitary products and complete in house testing to ensure that every product we offer you is safe, reliable, and meets the national safety certification.</li>
                        <li>We're working with our selling partners to prioritize safety protection products, daily necessaries, and other high demand electronic products, so we can more quickly receive, restock and ship these products to customers. Now, Gearbest offers a variety of masks, hand sanitizer gel, and other epidemic prevention products, as well as household daily necessities.</li>
                        <li>We are trying our best to increase product stock on the local warehouse to ensure that the products can be delivered to you as soon as possible.</li>
                        <li>We are taking extra precautions at the packing process, each package is disinfected before leaving our warehouse to ensure safe product and delivery for you.</li>
                        <li>Since the end of Jan, our company has donated part of the anti-epidemic goods. The total donations includes 50,000 South Korean KF94 masks, 80,000 Ecuadorian N95 masks, 250,000 Vietnamese disposable medical masks, 4850 protective clothing, 1000 medical goggles, 6500 hand sanitizer, 100 temperatures gun.</li>
                        </ul>
                        <p>Due to the strict investigation of overseas customs and the shortage of flights, our company immediately deployed superior global import and export resources, communicated with channels and resources in more than ten countries and regions such as Europe, America, Asia and Australia. Under the current shortage of global supplies, quickly obtain as many medical resources as possible, and seek cooperation from multiple parties to jointly solve the problem of goods procurement and transportation, and deliver supplies to their destinations as soon as possible.</p>
                        <p id="endrestrict">In addition to the above goods, our company is still actively coordinating to ensure that all goods are in place.</p>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="aceptrestricreg" type="button" class="btn btn-success" >Ok</button>
            </div>
        </div>

    </div>
</div>

Lo que quiero hacer es cuando llegue al tope habilitar el boton OK.
JS:

$("#reg_submit").on("click", function(){
$("#aceptrestricreg").attr("disabled", true);
$("#modalproducts").modal("show");
modalF();
});
var element = "";
$(document).ready(function() {
    $(".scrollmodal").scroll(function() {
        if ($(".scrollmodal").scrollTop() >= element + 400) {
            $("#aceptrestricreg").removeAttr("disabled");
        }
    });

});

function modalF() {
    element = $("#endrestrict").offset().top;
}

Y no me funciona pues no hace lo que tengo en mente. si yo imprimo

console.log($(".scrollmodal").scrollTop());

todo normal me sale la posición donde voy haciendo scroll, pero ahora lo que quiero hacer es cuando llegue al elemento "endrestrict" ejecutar una función para habilitar el botón. Pero la función que tengo me habilita el botón mucho antes de que llegue al elemento sin mencionar la versión en móvil.

Alguien tiene la solución a mi problema

One Answer

Puedes hacer que se active cuando llega al tope de scroll, calculando lo siguiente:

var pos=$(".scrollmodal").scrollTop(); // posicion de scroll
var max=$(".scrollmodal")[0].scrollHeight-$(".scrollmodal").height(); //tope de fondo

Si deseas que se active en otro punto anterior, puedes ajustar max descontando una cantidad de pixeles o la posicion relativa de dicho elemento ( usando $(element).position())

var element = "";
$(document).ready(function() {
  $("#reg_submit").on("click", function(){
    $("#aceptrestricreg").attr("disabled", true);
    $("#modalproducts").modal("show");
    modalF();
  });
    $(".scrollmodal").on("scroll",function() {
        var pos=$(".scrollmodal").scrollTop(); // posicion de scroll
        var max=$(".scrollmodal")[0].scrollHeight-$(".scrollmodal").height(); //tope de fondo
        if (pos>=max) {
            $("#aceptrestricreg").removeAttr("disabled");
        }
    });

});

function modalF() {
    element = $("#endrestrict").offset().top;
}
.scrollmodal{
  height: 100px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Modal -->
<div id="modalproducts" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <div class="row scrollmodal" id="scrollprueba">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h1>Lista de productos</h1>
                        <p id="startrestrictmodal">As COVID-19 continues to affect our day-to-day life, online retailers have an increasingly important role to play. We're acutely aware of our responsibilities and we're doing everything we can to ensure you get the items</p>
                        <p>At Gearbest, we hope you remain safe and healthy during this outbreak. It is our duty to offer a satisfying shopping experience for all of our valued customers as always. Light is at the end of the tunnel, so let's stay strong and patient during these special times. Gearbest will be still here to do our best to support you.</p>
                        <p>The following are FAQs for order and delivery that customers care about during the coronavirus epidemic.</p>
                        <h3>Q1. Will my package be delivered?</h3>
                        <p>Of course will, Gearbest's activities are currently continuing. However, delivery times may be longer than usual and our selection of items available for international shipping may be temporarily reduced.</p>
                        <h3>Q2. How long does it take to ship my package?</h3>
                        <p>The delivery time of the goods is determined by the product and the delivery area. Due to the impact of the epidemic, the overall shipping time has been delayed to varying degrees than before. You can find updated delivery times on the product detail page for each item. We will do our best to deliver your items as soon as possible and notify you by email. Our local warehouses stock goods are delivered faster.</p>
                        <h3>Q3. Will my package be infected?</h3>
                        <p>It's safe to order from Gearbest. We are taking extra precautions at the packing process, each package is disinfected before leaving our warehouse to ensure safe product and delivery for you.</p>
                        <h3>Q4. What's the status of my order and delivery?</h3>
                        <p>Once your order has been shipped out we will send you a shipping confirmation email that includes your tracking number. To check the status of your package, please click on the link and it will take you to the UPS, FedEx or other shipping vendors website. This function allows you to track your package using the tracking code provided in the email. You can also track your order in My account>> "My Orders".</p>
                        <h3>Q5. Can I change the address on my order?</h3>
                        <p>You can change the delivery address for an order until it ships. Once your order has shipped, you can find tracking information in your order details. If an order includes multiple items, each may have separate delivery dates and tracking information. You can also sign up to receive notification about your order here.</p>
                        <h3>Q6. Is it possible to reduce contact with the deliveryman?</h3>
                        <p>Yes. Gearbest's delivery partners have been advised to reduce contact with customers by placing packages at the customer's doorstep and stepping back. If an ID check is required, these are now performed at a distance. You can also choose a safe location where the deliveryman can leave your package if you are not able to answer the door.</p>
                        <h3>Q7. What actions is Gearbest taking during the COVID-19 Epidemic?</h3>
                        <ul>
                        <li>We are working hard to provide certified sanitary products and complete in house testing to ensure that every product we offer you is safe, reliable, and meets the national safety certification.</li>
                        <li>We're working with our selling partners to prioritize safety protection products, daily necessaries, and other high demand electronic products, so we can more quickly receive, restock and ship these products to customers. Now, Gearbest offers a variety of masks, hand sanitizer gel, and other epidemic prevention products, as well as household daily necessities.</li>
                        <li>We are trying our best to increase product stock on the local warehouse to ensure that the products can be delivered to you as soon as possible.</li>
                        <li>We are taking extra precautions at the packing process, each package is disinfected before leaving our warehouse to ensure safe product and delivery for you.</li>
                        <li>Since the end of Jan, our company has donated part of the anti-epidemic goods. The total donations includes 50,000 South Korean KF94 masks, 80,000 Ecuadorian N95 masks, 250,000 Vietnamese disposable medical masks, 4850 protective clothing, 1000 medical goggles, 6500 hand sanitizer, 100 temperatures gun.</li>
                        </ul>
                        <p>Due to the strict investigation of overseas customs and the shortage of flights, our company immediately deployed superior global import and export resources, communicated with channels and resources in more than ten countries and regions such as Europe, America, Asia and Australia. Under the current shortage of global supplies, quickly obtain as many medical resources as possible, and seek cooperation from multiple parties to jointly solve the problem of goods procurement and transportation, and deliver supplies to their destinations as soon as possible.</p>
                        <p id="endrestrict">In addition to the above goods, our company is still actively coordinating to ensure that all goods are in place.</p>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="aceptrestricreg" type="button" class="btn btn-success" >Ok</button>
            </div>
        </div>

    </div>
</div>
<button id="reg_submit" type="button" >Submit</button>

Answered by F.Igor on February 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP