How can I know that how much pixels reach when scroll horizontally?

.html

<div (scroll)='checkthis($event)' style="width:5000px; ,overflow-y: scroll;">

.ts

  checkthis(e){
     console.log("Y: "+window.pageYOffset)
     console.log("X: "+window.pageXOffset)
  }

Above code is the way that I tried. when I scroll horizontally I want to get the pixels how much scroll bar reach. must use JavaScript.

Answer

Yes, you are on the right track. Now suppose that we take a variable: winScroll-

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

Here winScroll means how high we are from the top. Now also, if you want to calculate the percentage of how low you are from the top then you can assume another variable: position from bottom.

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollpercent = (winScroll / height) * 100;

Here is an example about how you can use this to create a progress bar:

<!DOCTYPE html>
<html>
<head>
<style>
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  padding:10px;
  background-color: #f1f1f1;
}
.progress-container {
  width: 100%;
  height: 8px;
  background: grey;
}
.progress-bar {
  height: 8px;
  background: green;
  width: 0%;
}
</style>
</head>
<body>

<div class="header">
  Scroll Indicator - Scroll Down to See The Effect
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
<p>blablablablablablablablablablablablablablab
</div>

<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

</body>
</html> 

Here we are using a bit different concept from window.pageYOffset but this is much more convenient to use in code such as the example I gave above.