动态移动元素上的溢出滚动

Question

 var block = document.getElementById('block') function myFunct() { block.style.transform = 'translateX(-400px)' } 

  .container { position:relative; width:400px; height:150px; margin:auto; background-color: blue; overflow:scroll; } #block { position:absolute; height:25px; width:100%; left:50%; bottom:50%; overflow: scroll; background-color: yellow; border:1px solid black; align-self: flex-end; } 

  <div class="container"> <div id="block"></div> <button onclick='myFunct()'>CLICK</button> </div> 

在我的例子中，块溢出容器的右侧，溢出设置为滚动。 因此，您可以向右滚动并查看块的其余部分。 然后当我运行该函数时，块移动，使其溢出容器的左侧。 但是它不会调整以允许向左滚动以查看块的其余部分。 在运行函数并移动块以溢出那些不同的边之后，允许滚动其他边的解决方案是什么。

Answer 1

基于此 ，解决方案可以像这样“破解”：

 var block = document.getElementById('block') function myFunct() { document.getElementsByClassName('container')[0].dir = 'rtl'; block.style.transform = 'translateX(-400px)' } 

 .container { position:relative; width:400px; height:150px; margin:auto; background-color: blue; overflow:scroll; } #block { position:absolute; height:25px; width:100%; left:50%; bottom:50%; overflow: scroll; background-color: yellow; border:1px solid black; align-self: flex-end; } 

 <div class="container"> <div id="block"></div> <button onclick='myFunct()'>CLICK</button> </div> 

感谢@TemaniAfif指出我。

Answer 2

手头的真正问题是css属性transform 只会触发复合层上的重绘 ，这是一个优化决策，可以在不触发布局图层重绘的情况下促进动画。 要触发整个布局重绘，您应该使用left或right的布局属性：

例：

function myFunct() {
    block.style.left = '0px'
}

您在初始加载时获得滚动条的原因还在于：

#block {
...
  left: 50%
...
}

更多在这里对合成器，只有属性

编辑：

虽然以上情况属实，但是切换到'style.left'仍然不能删除它，因为块级元素具有从左到右或在css direction: ltr的默认内容流 direction: ltr所以这意味着你需要修改内容方向还应该取消使用style.left的需要。 见下文：

 var block = document.getElementById('block') var container = document.querySelector('.container') function myFunct() { block.style.transform = 'translateX(-400px)' container.style.direction = 'rtl' } 

  .container { position:relative; width:400px; height:150px; margin:auto; background-color: blue; overflow:scroll; } #block { position:absolute; height:25px; width:100%; left:50%; bottom:50%; overflow: scroll; background-color: yellow; border:1px solid black; } 

  <div class="container"> <div id="block"></div> <button onclick='myFunct()'>CLICK</button> </div> 

Answer 3

在黄色块移位并定位的地方是否重要？ 如果你只是设置#block宽度以允许额外400px的width: calc(100% + 400px)那么你可以在调用函数后看到溢出。

 var block = document.getElementById('block') function myFunct() { block.style.transform = 'translateX(-400px)' } 

 .container { position: relative; width: 400px; height: 150px; margin: auto; background-color: blue; overflow: scroll; } #block { position: absolute; height: 25px; width: calc(100% + 400px); left: 50%; bottom: 50%; overflow: scroll; background-color: yellow; border: 1px solid black; align-self: flex-end; } 

  <div class="container"> <div id="block"></div> <button onclick='myFunct()'>CLICK</button> </div> 

Answer 4

这就是我提出的。 我的解决方案适用于我的用法，即从右到左遍历页面，并且能够向左滚动以查看最终溢出的句子部分。 #fill div允许整个包装器可滚动而不仅仅是跨度。 有两种方法可以使用“line-height =（容器的大小）”来实现它，但我认为这会导致未来的问题，所以我避免了。 我的方法的关键是函数中的“outer.scrollLeft + = outer.scrollWidth”。 有一个更流畅的方式这样做，因为我的方式是不稳定的移动整个跨度元素左，这是我的原始问题指向，但最终不是我如何做到这一点。 Meshu的解决方案也适用于我问的问题。 “方向：rtl”也允许解决方案。

 var inset = document.getElementById('inset') var fill = document.getElementById('fill') var text = 'There was a lamb who had a cow and a farmer was involved and then you make a moo sound and yell BINGO and that is how the song goes.'; /*Obviously you can change this jibberish */ var words = text.split(" ") /* breaking the text into an array of each word */ var i = 0 var timer = 5; /*How long the text will take to run through in seconds*/ var wordTime = (timer / words.length) * 1000; /* Time before the next word takes to the screen. As of this code, all words have equal time */ var myVar = setInterval(myFunct, wordTime); function myFunct() { if (i == words.length) { clearInterval(myVar); /* Stops running when all words are passed through */ } else { inset.innerHTML += " " + words[i]; } i++ let outer = fill outer.scrollLeft += outer.scrollWidth; /*important */ } 

 #wrapper { position: absolute; display: flex; height: 100px; width: 100%; min-width: 100%; max-width: 100%; left: 0; right: 0; bottom: 0; align-items: center; text-align: right; color: whitesmoke; font-family: sans-serif; font-size: 200%; background-color: rgba(0, 0, 0, 0.7); } #fill { display: flex; width: 100%; /*You can change this to change how much of container the text overtakes */ height: 100%; max-width: 100%; align-items: center; overflow: auto; } #inset { padding-left:5px; white-space: nowrap; margin-left:auto; } 

 <div id='wrapper'> <div id='fill'> <span id='inset'></span> </div> </div> 

。