将部分图像与视口对齐而不会引起溢出

Question

标题说我的问题，这是我到目前为止所做的：

jsfiddle

但我认为隐藏overflow-x并不是一项好技术。

body {
  overflow-x: hidden;
}

.background-image {
  position: absolute;
  right: -100px;
  top: 0;
  width: 350px;
  height: 150px;
  background: url(http://via.placeholder.com/350x150);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Answer 1

最简单的方法是在overflow-x:hidden代码上使用CSS属性body，这会将您的图片置于viewport之外，x-axis处的滚动条将无法显示。但是，由于您已添加了don't want to invoke overflow，因此在这种情况下，wrap div可以parent目标元素，然后您可以添加overflow-x:scroll，现在隐藏{{使用如下所示的特定父div的1}}，

scroll bar

targetedElement::-webkit-scrollbar{
  display:none;
}  

.box{
  width: 350px;
  height: 150px;
  float: right;
	position:relative;
	overflow-x:scroll;
}
.box::-webkit-scrollbar{
	display:none;
}
.box > .background-image {
  position: relative;
  right:-100px;
  top: 0;
  width: 350px;
  height: 150px;
  background: url(http://via.placeholder.com/350x150);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}