javascript - 两侧隐藏溢出的中心任何滑块

Question

我的目标是让滑块宽 1280 像素并在页面上居中。我希望内容的边缘在两侧都有隐藏的溢出。例如，我希望内容的中心始终保持在页面的中心，随着浏览器的大小调整，每一边都被切断，没有出现水平滚动条。

有没有一种简单的方法可以做到这一点？

Answer 1

我最终得到了一个有点有趣的解决方案，它（至少）在我测试过的 Chrome、Firefox 和 Safari 中对我有用。它可能有点hacky，但结果很酷。

所以这就是我所做的：我放了.wrapper一个宽度为1280px. 边距是0 auto 除了左边距之外的地方，这是所有事情发生的地方。左边距需要设置为宽度的一半。div在这种情况下，将是640px。但是，因为它必须溢出到左侧屏幕之外，所以它必须设置为负数（即-640px）。然后为了在屏幕较大时扭转这种效果，然后将屏幕 aleft:50%推到正确的数量上。显然，为了margin:0 auto真正起作用，position必须将 设置为relative（或者absolute如果您愿意）。

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

不过，我发现了一个问题。因为我们使用的是负边距，它会将 div 向左推到无法看到屏幕或浏览器窗口是否太小的位置。让我知道这是否是一个问题，并使它对您不起作用。

Answer 2

添加这个css类

  .overflowbothsides{
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

带有代码和示例的解决方案 在此处输入链接描述