jQuery - Triggerereignis, wenn ein horizontal scrollbaren div ist die am weitesten links stehende und rechts die meisten Scroll

Question

Ich habe einen horizontal scrollbaren div:

<div id = "scrollable-div"> 
    <div class = "div-inside"></div> 
    <div class = "div-inside"></div> 
    <div class = "div-inside"></div> 
    <div class = "div-inside"></div> 
</div> 

Ich möchte ein Ereignis, wenn der Benutzer einen Bildlauf auslösen zu die extreme rechts von der div, und dann ein anderes Ereignis, wenn sie zurück nach ganz links von der div scrollen. Ich habe den folgenden Code, der ein Ereignis auslöst, wenn ich auf der extremen Rechten erhalten:

jQuery(function ($) { 
     $('#scrollable-div').on('scroll', function() { 
      if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) { 
       $('#end-treatment').show(); 

      } 
     }) 
    }); 

Aber ich kann nicht scheinen, um es Arbeit zu kommen, wenn nach links zurück. Grundsätzlich würde ich gerne ein div beim Scrollen nach rechts und ein weiteres beim Scrollen nach links zeigen. Ist das möglich? Danke ..

Answer 1

Ja, wenn ich dich richtig verstehe. Sehen Sie das Code-Snippet unten, aber die Grundidee ist if($(this).scrollLeft() === 0) { ... }

Ich habe auch Logik eingefügt (siehe mein Kommentar), die die Nachrichten versteckt, falls Sie das wollten, aber Sie können es entfernen, wenn das nicht das ist, was Sie wollen.

jQuery(function ($) { 
 
    $('#div-1').on('scroll', function() { 
 
    if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) { 
 
     $('#end-treatment').show(); 
 
    } else if($(this).scrollLeft() === 0) { 
 
     $('#other-message').show(); 
 
     
 
    // Remove this part if you don't want your messages hidden again 
 
    } else { 
 
     $('#end-treatment').hide(); 
 
     $('#other-message').hide(); 
 
    } 
 
    }) 
 
});

.scrollable-div { 
 
    max-width: 200px; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
    background: lightgray; 
 
} 
 

 
.div-inside { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 30px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    background: gray; 
 
} 
 

 
.message { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div-1" class="scrollable-div"> 
 
    <div class="div-inside"></div> 
 
    <div class="div-inside"></div> 
 
    <div class="div-inside"></div> 
 
    <div class="div-inside"></div> 
 
</div> 
 

 
<div id="end-treatment" class="message"> 
 
    "End Treatment" 
 
</div> 
 

 
<div id="other-message" class="message"> 
 
    "Other Message" 
 
</div>