How to combine this scripts correctly?

Question

I have 2 scripts which can't work parallel. The first one is for scrolling to the search bar when it's focused, the other one removes focus when youre scrolling (to remove keyboard on mobile).

Is there a way to combine these scripts, to have it scrolling first to the search bar and then have the second script get activated if you scroll again for removing the keyboard? Because right now it's scrolling to the search bar and then it loses focus.

To scroll it to the search bar:

    $("#myInput").click(function () {
    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300);
    return true;
});

To remove focus when scrolling again:

    document.addEventListener("scroll", function() {
  document.activeElement.blur();
});

Thanks already!

Example:

$("#myInput").click(function() {
  document.removeEventListener("scroll", blurElement);

  $("html, body").animate({
    scrollTop: $("#b").offset().top
  }, 300, function() {
    document.addEventListener("scroll", blurElement);
  });

  return true;
});

function blurElement() {
  document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

#a {
  height: 100px;
  background: #aaa;
}

#b {
  background: #bbb;
}

#c {
  height: 1000px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
  <input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
^ need this stay focused untill I scroll again
</div>

Answer 1

Maybe using a flag to prevent "blurring" while your animation is running;

var allowBlur = true;

$("#myInput").click(function () {
    allowBlur = false;
    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
        allowBlur = true;
    });
    return true;
});

document.addEventListener("scroll", function() {
    if(!allowBlur) return;
    document.activeElement.blur();
});

Attempt #2

$("#myInput").click(function () {
    document.removeEventListener("scroll", blurElement);

    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
        document.addEventListener("scroll", blurElement);
    });

    return true;
});

function blurElement() {
    document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

Attempt #3

It appears that for some reason the "scroll" event is still being sent even when the animation is done. So based on this answer https://stackoverflow.com/a/8791175/1819684 I used a promise but I still needed a setTimeout to give the "scroll" time to end.

$("#myInput").click(function() {
  document.removeEventListener("scroll", blurElement);

  $("html, body").animate({
    scrollTop: $("#b").offset().top
  }, 300).promise().done(function() {
    setTimeout(function() {
      document.addEventListener("scroll", blurElement)
    }, 100);
  });

  return true;
});

function blurElement() {
  document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

#a {
  height: 100px;
  background: #aaa;
}

#b {
  background: #bbb;
}

#c {
  height: 1000px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
  <input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
</div>