水平滚动在Chrome和Safari中都能正常工作。

#d1, #d2 {
  overflow-x: scroll;
  box-sizing: border-box;
  white-space: nowrap;
  color: white;
  padding: 1em;
  margin-bottom: 1em;
}

#d1 {
  background-color: green;
}

#d2 {
  background-color: blue;
  direction: rtl;
}

<div id="d1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis mauris convallis ultricies vulputate. Suspendisse dignissim massa id lorem consequat semper. Maecenas consectetur libero tellus, in hendrerit est lobortis ac. Sed sit amet ipsum massa. Phasellus efficitur in arcu at tincidunt. Vestibulum egestas aliquet elit, ac maximus mauris commodo ut. Ut scelerisque ligula non consectetur molestie.
</div>
<div id="d2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis mauris convallis ultricies vulputate. Suspendisse dignissim massa id lorem consequat semper. Maecenas consectetur libero tellus, in hendrerit est lobortis ac. Sed sit amet ipsum massa. Phasellus efficitur in arcu at tincidunt. Vestibulum egestas aliquet elit, ac maximus mauris commodo ut. Ut scelerisque ligula non consectetur molestie.
</div>