时间戳

首页 > 解决方案 > 如何使用popper.js从referenceObject中偏移dataObject？

popper.js - 如何使用popper.js从referenceObject中偏移dataObject？

问题描述

如何boat从偏移anchor几个像素？

您可以在此处找到我尝试设置偏移量但未成功的代码笔

https://codepen.io/anon/pen/wXraLK?editors=1111

HTML

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>

<div class="anchor">Anchor</div>
<div class="boat">Boat</div>

CSS

.boat {
  display: inline-block;
  background-color: yellow;
}
.anchor {
  display: inline-block;
  background-color: gray;
}

JavaScript

var anchor = document.getElementsByClassName("anchor")[0];
var boat = document.getElementsByClassName("boat")[0];

var offsetTopModifier = function (data) {
  data.offsets.popper.top += 50;
  return data;
}

var popper = new Popper(
  anchor,
  boat,
  {
    placement: 'bottom-end',
    modifiers: [offsetTopModifier]
  }
);

这是激发我尝试的来源：

https://github.com/FezVrasta/popper.js/issues/107

标签： popper.js

解决方案

一种解决方法是在船上设置边距。

推荐阅读