Css - Scroll horizontally only by fixed amount

Simone
April 25, 2024
232 views
1 vote
2 Answers

I am trying to position a number of buttons on a horizontally scrollable div at the bottom of a screen on a mobile device.

All buttons are of the same width.

Since I have more buttons than I can fit I’d like the div to scroll so that a button is never half on screen and half off.

In other words, the div should scroll only by fixed amounts and be "sticky" at those points.

Is that possible? I don’t even know what that could be called, otherwise I’d have googled a bit longer

Answers

you can put all buttons in the same container
and apply these changes

If this is not the case
please consider put more information

.container {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

 <div class="container">
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>

the relevant css is :

mdn : scroll-snap-type

scroll-snap-type needs to be applied to the container element

mdn : scroll-snap-align

scroll-snap-align on the child elements

  for(var i=0;i<10;i++){
    var btn=document.createElement('button');
    btn.textContent='test';
    btns.append(btn);
  }

  html,body{
    height:calc(100% - 16px);
  }
  
  #btns {
    position:fixed;
    bottom:0;
    white-space:nowrap;
    overflow:auto;
    width:100%;
    scroll-snap-type: x mandatory;
  }
  
  button {
    width:120px;
    scroll-snap-align: start;
    
    /* the rest is making the buttons look better */
    
    align-items: center;
    background-clip: padding-box;
    background-color: #fa6400;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    
  }

  
  button:hover,
  button:focus {
    background-color: #fb8332;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  }

  button:hover {
    transform: translateY(-1px);
  }

  button:active {
    background-color: #c85000;
    box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
    transform: translateY(0);

  }

<div id=btns></div>

here is a jsbin demonstrating the same thing in a larger viewport

the scrollbar is a bit ugly and can possibly be removed, i’d have to investigate it further

Css – Scroll horizontally only by fixed amount

Answers