Question

我正在尝试调整现有应用程序，因此希望不更改dom结构。但是我似乎无法得到我所需要的。

这是我现在所在位置的示例。

<div class="canvas">
  <div class="node node-1">node 1</div>
  <div class="node node-2">node 2</div>
  <div class="node node-3">node 3</div>
  <div class="wrapper">
    <div class="right-target"></div>
  </div>
</div>

html, body {
  height:100%;
  background: yellow;
  padding:0;
  margin:0;
}

.canvas {
  position:relative;
  background: red;
  height:100%;
  overflow:auto;
}

.node {
  position:absolute;
  background: grey;
  width: 200px;
  height: 20px;
}

.node-1 {
  top: 2px;
  left: 2000px;
}

.wrapper {
  position:relative;
  height:100%;
  background:pink;
}

.right-target {
  position:absolute;
  right:0px;
  top:0px;
  width:20px;
  height: 100%;
  background:green;
}

我希望.wrapper div扩展到.canvas（滚动）div的整个宽度，因此绿色.right-target应该在最右边。但是无论我怎么尝试，我似乎都看不到使.wrapper div扩展到超过视口宽度。

我已经看到了可以垂直解决此问题的示例（http://bennadel.github.io/JavaScript-Demos/demos/css-position-overflow/），但对于我来说，我似乎无法获得相同的原理。

Answer 1

您有2个选择...

使.wrapper的视口溢出其子元素的确切宽度，这是您实际上要从视口中移出的宽度，但是由于您无法精确地执行此操作（没有一些极其新的CSS功能）将使.wrapped元素100% + 20px变宽（我相信这实际上是在将来的规格上）
一个更好的解决方案（如果适用于您的用例）将是绿色的.right-target重叠部分是容器（.wrapper）的确切宽度...

.right-target { ... right: -20px; ... }

对不起，被误解的问题。修改后的答案如下...

要执行此操作，由于.canvas元素会导致视口溢出，因此您将需要使用Javascript。您需要...

计算初始视口宽度
立即将.canvas的宽度设置为视口宽度+产生溢出的元素的偏移量，分别为.node-1和2000px
1. 调整视口大小时，您将不得不重新计算新视口。
2. 将.canvas重置为新的视口宽度+相同的.node-1偏移量

$(document).ready(function () {
var viewportStartWidth = window.outerWidth,
    $target = $('.wrapper'),
    $offsetElems = $('.canvas .node'),
    offsetRight = (function () {
       var largestOffset = 0;
       $offsetElems.each(function(){
            var pos = $(this).offset().left;
            if (pos > largestOffset) {
             largestOffset = pos; 
            }
       });
       return largestOffset;
    })();
  
$target.width(viewportStartWidth + offsetRight)

$(window).on('resize', function(){
  var viewportNewWidth= $(this).outerWidth;
  $target.width(viewportNewWidth + offsetRight)
});

})

这使您的代码非常脆弱（如果2000px偏移量曾经发生变化），并且每次调整浏览器大小时，都会付出可观的性能成本（计算和重置宽度）。您可以通过取消抖动/限制这些计算的速度来改善这一点，但是我建议采用确实来重新组织DOM的解决方案，即使您必须使用JS初始页面加载。

完整的示例：https://codepen.io/anon/pen/QYWwKq

这是使用纯CSS的唯一方法，但请查看browser support以确保它对您来说可以接受...

.canvas {
    ...
    width: calc(100% + 2000px);   
    ...
}

工作示例：https://codepen.io/anon/pen/GzRgeE

使子元素成为滚动父级的完整水平宽度

1 个答案: