Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>scrollIntoView + scroll snap</h1>
  <p>
    This demonstrates a bug where
    trying to scroll an item into view
    with mandatory scroll snapping
    can result in the item not being in view.
  </p>
  <div class="scroller">
    <div class="page">
      <div class="target" id="t1">1</div>
      <div class="target" id="t2">2</div>
      <div class="target" id="t3">3</div>
    </div>
    <div class="page">
      <div class="target" id="t4">4</div>
      <div class="target" id="t5">5</div>
      <div class="target" id="t6">6</div>
    </div>
    <div class="page">
      <div class="target" id="t7">7</div>
      <div class="target" id="t8">8</div>
      <div class="target" id="t9">9</div>
    </div>
  </div>
  <h2>Anchor links</h2>
  <p>Scroll to:</p>
  <a href="#t1">1</a>
  <a href="#t2">2</a>
  <a href="#t3">3</a>
  <a href="#t4">4</a>
  <a href="#t5">5</a>
  <a href="#t6">6</a>
  <a href="#t7">7</a>
  <a href="#t8">8</a>
  <a href="#t9">9</a>
  <h2>scrollIntoView API</h2>
  <p>Call scrollIntoView on:</p>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</body>
</html>
 
.scroller {
  overflow-x: auto;
  overflow-y: hidden;
  width: 340px;
  scroll-snap-type: x mandatory;
  border: 1px solid black;
  height: 130px;
  white-space: nowrap;
  position: relative;
  scroll-behavior: smooth;
}
.page {
  display: inline-block;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}
.target {
  display: inline-block;
  margin: 5px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid gray;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
}
 
const smooth = document.querySelector('input');
const scroller = document.querySelector('.scroller');
for (const button of document.querySelectorAll('button')) {
  button.addEventListener('click', () => {
    document.getElementById(`t${button.textContent}`).scrollIntoView({behavior: scroller.classList.contains('smooth') ? 'smooth' : 'instant'});
  });
}
smooth.addEventListener('input', () => {
  if (smooth.checked)
    scroller.classList.add('smooth');
  else
    scroller.classList.remove('smooth');
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
flackrpro
0viewers