0

I am using react-indiana-drag-scroll, and I am doing a Horizontal scroll, but the last item ( the 30th) 's right red shadow cannot show on screen

I tried to add padding/ margin/ border, still does not work.

sandbox: https://codesandbox.io/s/react-indiana-drag-scroll-default-forked-1xcxt

AC28
  • 282
  • 2
  • 11

1 Answers1

1

It's not the issue of react-indiana-drag-scroll. It's the peculiarity of browsers behavior [1], [2].

There are many different solutions to solve your exact problem.

Emulate margin by :after pseudo-element (example):

.container:after {
   content: "";
   flex: 0 0 10px;
}
.row:last-child {
   margin-right: 0;
}

Use inline-block (example):

.container {
   display: block;
   white-space: nowrap;
}
.row {
   ...
   margin: 10px;
   display: inline-block;
}

Other solutions could be found by the links above.

Norserium
  • 106
  • 3