试图通过CSS指针事件禁用点击

Question

I am currently working on a project which has a slideshow and allows the user to slide left or right, depending on what arrow they have clicked.

The slider itself is working fine. What I am now trying to achieve is disabling the respective arrow button which triggers the slide once it has reached its end. At the moment, when I click on the arrow, despite the div reaching its end, it continues sliding, and no content is shown of course because there is nothing there. I am currently using the CSS pointer-event prop in an attempt to disable it.

All help and responses, as always, are greatly appreciated.

 if ($(".topsellingrange").css("left", "0%")) { $("#left-scroll).css("pointer - events "," none "); } if ($(".topsellingrange").css("left", "-300%")) { $("#right-scroll).css("pointer - events "," none "); } $(".topsellingrange").animate({ left: "+=100%" }, 900, function() { }) }) $("#right-scroll").click(function() { $(".topsellingrange").animate({ left: "-=100%" }, 900, function() { }) }) 

 .protein-products { width: 100%; position: relative; justify-content: space-around; height: 85vh; overflow: hidden; } .scroll-div { width: 100%; text-align: center; } .scrolling-icon { font-size: 1em; color: green; display: inline-block; margin: 1em 13em; } .topsellingrange { width: 400%; display: flex; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="protein-products"> <h1>TOP SELLING PROTEIN RANGE</h1> <div class="scroll-div"> <span id="left-scroll" class="scrolling-icon"><i class="fas fa-chevron-left"></i></span> <span id="right-scroll" class="scrolling-icon"><i class="fas fa-chevron-right"></i></span> </div> <div class="topsellingrange"> <div class="protein-product"> <img src="images/index/protein1.jpg"> <img src="images/5star.jpg"> <span class="heading">100% Whey Protein Professional</span> <span class="product-price">&pound26.39</span> <button class="more-info">MORE INFO</button> <button id="product1" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein2.jpg"> <img src="images/5star.jpg"> <span class="heading">MUSCLE MILK (Vanilla) 1120g</span> <span class="product-price">&pound31.20</span> <button class="more-info">MORE INFO</button> <button id="product2" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein3.jpg"> <img src="images/5star.jpg"> <span class="heading">Organic Protein Plant-Based Protein Powder</span> <span class="product-price">&pound13.78</span> <button class="more-info">MORE INFO</button> <button id="product3" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein4.jpg"> <img src="images/5star.jpg"> <span class="heading">Combat 100% Ultra Premium Whey</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product4" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein5.jpg"> <img src="images/5star.jpg"> <span class="heading">Builder's Protein Bars Box Chocolate - 12 Bars</span> <span class="product-price">&pound15.39</span> <button class="more-info">MORE INFO</button> <button id="product5" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein6.jpg"> <img src="images/5star.jpg"> <span class="heading">Ultimate Nutrition: CarneBOLIC protein</span> <span class="product-price">&pound42.99</span> <button class="more-info">MORE INFO</button> <button id="product6" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein7.jpg"> <img src="images/5star.jpg"> <span class="heading">Pure Protein: 100% Whey (vanilla)</span> <span class="product-price">&pound18.99</span> <button class="more-info">MORE INFO</button> <button id="product7" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein8.jpg"> <img src="images/5star.jpg"> <span class="heading">BodyLab: Fat Burning Protein (Vanilla)</span> <span class="product-price">&pound16.99</span> <button class="more-info">MORE INFO</button> <button id="product8" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein9.jpg"> <img src="images/5star.jpg"> <span class="heading">Plant Based: Tone It Up Protein</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product9" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein10.jpg"> <img src="images/5star.jpg"> <span class="heading">Olly: Nourishing Smoothie Protein</span> <span class="product-price">&pound17.99</span> <button class="more-info">MORE INFO</button> <button id="product10" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein11.jpg"> <img src="images/5star.jpg"> <span class="heading">Premier Protein x 4 (Chocolate)</span> <span class="product-price">&pound11.99</span> <button class="more-info">MORE INFO</button> <button id="product11" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein12.jpg"> <img src="images/5star.jpg"> <span class="heading">Orgain: Organic Slim Protein</span> <span class="product-price">&pound16.49</span> <button class="more-info">MORE INFO</button> <button id="product12" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein13.jpg"> <img src="images/5star.jpg"> <span class="heading">Only Protein: Whey Vanilla</span> <span class="product-price">&pound15.99</span> <button class="more-info">MORE INFO</button> <button id="product13" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein14.jpg"> <img src="images/5star.jpg"> <span class="heading">Muscle Milk: Strawberry Whey</span> <span class="product-price">&pound21.99</span> <button class="more-info">MORE INFO</button> <button id="product14" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein15.jpg"> <img src="images/5star.jpg"> <span class="heading">Kodiak Cakes: Protein Flapjack On The Go x 12</span> <span class="product-price">&pound19.99</span> <button class="more-info">MORE INFO</button> <button id="product15" class="shopnow">ADD TO BASKET</button> </div> <div class="protein-product"> <img src="images/index/protein16.jpg"> <img src="images/5star.jpg"> <span class="heading">EAS: 100% Whey Protein 907g Chocolate</span> <span class="product-price">&pound12.99</span> <button class="more-info">MORE INFO</button> <button id="product16" class="shopnow">ADD TO BASKET</button> </div> </div> </section> 

Answer 1

You are using the .css() method incorrectly in the if condition. If you need to check if particular CSS style is applied, the you should do it like - $(el).css('css-property') === 'value'

In your code, you can check like -

if ($(".topsellingrange").css("left") === "0%") {
  $("#left-scroll").css("pointer-events","none");
}

if ($(".topsellingrange").css("left") === "-300%") {
  $("#right-scroll").css("pointer-events","none");
}

There's a lot more things you can fix in the code or handle the disabling in other ways, but this should help you understand if your problem is fixed in your code. My suggestion would be to not reinvent the wheel for such things when there are many plugins which would handle that well for you, unless you're trying to learn or build one yourself!