溢出在动态移动元素上滚动 [英] Overflow scrolling on dynamically moving elements

问题描述

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>

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

In my example the block overflows the right side of the container and overflow is set to scroll. So you can scroll the right side and see the rest of the block. Then when I run the function, the block moves so it's overflowing the left side of the container. However it does not adjust to allow for scrolling left to see the rest of the block. What is the solution to allow for scrolling of other sides after functions are ran and blocks are moved to overflow those different sides.

推荐答案

眼前的真正问题是css属性transform 只会在复合层上触发重新绘制，这是一个为优化动画而做出的优化决定，而又不会触发 Layout Layer 上的重新绘制.要触发整个布局重画，您应该使用left或right这样的布局属性:

The real problem at hand is that the css property transform will only trigger a repaint on the Composite Layer, this was an optimization decision made to facilitate animations without triggering repaints on the Layout Layer . To trigger an entire layout repaint you should use a layout property like left or right:

示例:

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

另外，您在初始加载时获得滚动条的原因还在于:

Also the reason you are getting the scrollbar on initial load is because you have:

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

更多

尽管上面的情况是正确的，但切换到'style.left'仍然不会削减它 因为块级元素的默认内容流向从左到右或在CSS direction: ltr中，所以这意味着您还需要修改内容方向，这应该取消使用style.left.见下文:

Although the above is true, switching to 'style.left' will still not cut it because block level elements have a default content flow direction of left to right or in css direction: ltr so this means you'll need to modify the content direction as well which should cancel out the need to use style.left. See below:

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>

这篇关于溢出在动态移动元素上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！