Tether初始化方法

最新推荐文章于 2024-11-06 07:16:20 发布

Sophia George

最新推荐文章于 2024-11-06 07:16:20 发布

阅读量423

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_42977442/article/details/117554593

版权

Tether 浮窗定位约束条件元素挂载目标定位

关键词由CSDN通过智能技术生成

简介：Tether可以用固定定位实现浮窗，提示等效果。

一、初始化方法

new Tether({
  element: yellowBox,//挂载元素
  target: greenBox,//触发对象
  attachment: 'top right',//触摸定位
  targetAttachment: 'top left'//目标定位
});

在这里插入图片描述

二、浮窗的偏移量

// offset:`${offsetY}px ${offsetX}px`,
        targetOffset: this.getOffset(
          cWidth,
          clientX,
          cHeight,
          clientY,
          targetWidth
        ),

在这里插入图片描述

三、Constraints

个人理解浮窗不足以展示时父页面出现scroll

constraints: [
          {
            to: "scrollParent",
            pin: true,
            attachment: "together",
          },
          {
            to: "window",
            attachment: "together",
          },
        ],