滚动在chrome中的svg外部对象内部不起作用 [英] scroll is not working inside svg foreign object in chrome

问题描述

我在svg外部对象里面有div，有溢出：auto

I have div inside svg foreign object, with overflow:auto

• 滚动只用鼠标滚轮，不能拖动吧


• 它适用于firefox，但不适用于chrome / safari


• 如果没有对svg-g元素进行转换，则它可以工作

请参阅小提琴： http://jsfiddle.net / ranr / ncry8Lmx /

这是Chrome中的错误吗？周围的任何方式？

Is it a bug in chrome? any way around it?

<svg width="1000" height="800">
  <g transform="translate(100,50)">
    <rect x="4" y="4" width="110" height="90" stroke="#666666" fill="#eeeeee" />
    <foreignObject x="10" y="10" width="100" height="80">
      <div xmlns="http://www.w3.org/1999/xhtml" style="height:100%;overflow:auto;">
        <div>aaaaaa</div>
        <div>bbbbbb</div>
        <div>cccccc</div>
        <div>dddddd</div>
        <div>eeeeee</div>
        <div>ffffff</div>
      </div>
    </foreignObject>
    <g>
</svg>

推荐答案

铬虫已关闭，不幸的是，它看起来更糟糕。如果你打开jsfiddle，那个div内容是不可见的，除了你删除 overflow：auto 样式。我测试过，如果 overflow-y：scroll ，它仍然是不可见的。在Chrome v62中测试。 Firefox 57运行良好。

That chromium bug is closed, unfortunately, it looks worse. If you open the jsfiddle, that div content is invisible, except you remove overflow:auto style. I tested, it is still invisible if overflow-y:scroll. Test in Chrome v62. Firefox 57 working well.

这篇关于滚动在chrome中的svg外部对象内部不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！