How to prevent all items from exiting the screen when animating using Translate?

Question

I need to limit the advance when pressing the "move button". The way it is if you keep pressing the button there will come a time when the items will disappear from the screen. I wish that didn’t happen, that when the last item appeared the animation would stop preventing all items from leaving the screen, but I’m having trouble with this part. Basically what has to happen is that if you press the "Forward" button and if the last item is already shown, it has to stop, the way it is it keeps going until it leaves the screen.

It has to stop moving as soon as the last item appears, so that when it arrives at the last item, it looks like the image below.

var amount = getFirstChild(document.getElementById("scroll1")).clientWidth; //300;
var margin = 16;
var initial = 0;
var scroll_container = document.getElementById("scroll1");


function getFirstChild(el) {
  var firstChild = el.firstChild;
  while (firstChild != null && firstChild.nodeType == 3) { // skip TextNodes
    firstChild = firstChild.nextSibling;
  }
  return firstChild;
}

// Avança
document.getElementById("myBtn2").addEventListener("click", function() {
  initial -= (amount + margin);
  scroll_container.style.transform = "translateX(" + initial + "px)";
})

// Volta
document.getElementById("myBtn1").addEventListener("click", function() {
  if (initial + (amount + margin) >= 0) {
    initial = 0;
    scroll_container.style.transform = "translateX(" + 0 + "px)";
  } else {
    initial += (amount + margin);
    scroll_container.style.transform = "translateX(" + initial + "px)";
  }
})

#container-controls {
  display: inline-flex;
  width: 100%;
}

#title_page {
  width: calc(100% - 170px);
}

#title_page h2 {
  text-align: left;
  padding: 0;
  font-family: 'Optimistic Display Medium', Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  margin: 0;
  color: #344854;
  font-size: 48px;
}

.btn_control {
  background: blue;
  height: 40px;
  width: 80px;
  margin: 5px 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  margin-top: auto;
}

.imagem {
  height: 300px;
  width: 300px;
  margin: 16px 16px 16px 0px;
  display: block;
  background: black;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
}

.scrolls {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  transform: translateX(0px);
  transition: transform 0.5s cubic-bezier(0.25, 0.72, 0.51, 0.96) 0s;
  min-width: unset;
  margin: 10px;
}

<div>
  <div id="container-controls">
    <div id="title_page">
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    </div>
    <div id="myBtn1" class="btn_control"> Retrocede </div>
    <div id="myBtn2" class="btn_control"> Avança </div>
  </div>
  <div class="wrapper">
    <div class="scrolls" id="scroll1">
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
    </div>
  </div>
</div>

Answer 1

I made an example here based entirely on what you posted. I changed the Switch from myBtn2 as below and in the tests I performed here worked correctly.

Edit. I added the function isElementInViewport based on that post https://stackoverflow.com/a/7557433/4623423

Recommended link for reading https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

function isElementInViewport(element) {
    const rect = element.getBoundingClientRect();
    //console.log(rect.right, window.innerWidth ,scroll_container.clientWidth , document.body.clientWidth, document.documentElement.clientWidth)
    return (
        rect.left >= 0 && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Avança
document.getElementById("myBtn2").addEventListener("click", function() {
    const lastImg = scroll_container.lastElementChild;
    if (isInViewport(lastImg)) {
        return;
    }
    initial -= (amount + margin);
    scroll_container.style.transform = "translateX(" + initial + "px)";
})