小编Jes*_*chi的帖子

我一直在尝试使一些 SVG 数据图表具有响应性，但似乎无法将当前的 CSS 'position:fixed' 应用于元素。

如果可能，我正在寻找一种不依赖媒体查询的解决方案，因为我有多个元素需要将其应用到。如果这是不可能的，那么关于在调整浏览器大小时如何使所有数据与 SVG 匹配的任何建议都会很棒！

理想情况下，我希望 SVG 可以放大和缩小大小，同时保持居中，无论浏览器的大小如何。

这是我希望做出响应的 SVG 之一（右侧） http://datahealthcheck.databarracks.com/2016/#backup-section-3

我创建了一个 codepen 并在 SVG 上仅添加了一个百分比作为问题的示例http://codepen.io/anon/pen/YGvXkq

<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>

#Backup-3 {
  position: fixed;
  width: 550px;
  margin-left: 73px;
  margin-top: 31px;
}

.backup3-percentage {
  position: fixed;
  color: #000;
  margin-left: 478px;
  margin-top: 96px;
  font-size: 1em;
  transform: rotate(6deg);
}

我正在尝试创建一个单页站点，最初在滚动页面时会垂直向下滚动，然后到达底部的完整页面宽度/高度部分，我希望滚动方向更改为水平方向。

我一直在使用以下代码在到达页面底部时将滚动方向更改为水平：

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
   $("body").css("overflow-x", "auto", "overflow-y", "hidden");
     $('html, body, *').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 30);
      e.preventDefault();
    });
   } 
 });

但是，我需要一种方法，该方法也可以将方向从上到下滚动，然后从左到右到右到左，从下到上。我对 jQuery 比较陌生，我不确定实现这一目标的最佳方法。