javascript - 如何在滚动时使这些 tagHovers 的位置靠近标签并且 tagHover 具有固定位置？

https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview |下面还有一个 stackoverflow 片段。

无需滚动，tagHovers 将正确显示:

问题

我认为问题是因为我在 tagHovers tags-modal 类上设置了一个 fixed 位置。但是，我需要该 div 上的 fixed 位置，以便 tagHovers 可以突破 .tags-container 的限制。

有没有另一种方法可以实现这种效果，而无需重新设置 tagHovers 的样式，使它们必须适合 tags-column 的微小宽度？

无需滚动即可正确定位

滚动后，固定 tagHover 的位置会中断

但是，一旦我开始滚动，tagHovers 就会失去它们与您悬停的标签的相对位置。

.tags-container 有一个 overflow-y: auto; 显示滚动。

每个标签都有一个关联的 tag-hover 指令。

tagHovers 具有这种样式(因此它们可以显示在标签列的约束之外。)

CSS

https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8

TagHover.html

<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
    <h1>Hover for: {{ tghov.tag.term }}</h1>
</section>

var app = angular.module('plunker', ['ui.bootstrap'])
.component('tagHover', {
//      templateUrl: 'tags_modal.html',
  template: `<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
  <h1>Hover for: {{ tghov.tag.term }}</h1>
</section>`,
  controllerAs: 'tghov',
  bindings : {
      tag: '<'
  }
})
.controller('TagsHoverController', function(){});

app.controller('MainCtrl', function($scope) {
});

app.component('myComponent', {
  bindings: {},
//  templateUrl: 'tags.html',
  template: `<section class="tags-view">
  <div class="tags-column">
    <h1>Tags</h1>
    <div class="tags-container">
      <ul>
        <li ng-repeat="tag in tgs.tags">
          
          <div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
            <div class="tag-container">
              <div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
              <tag-hover tag="tag"></tag-hover>
            </div>
          </div>
          
        </li>
      </ul>
    </div>
  </div>
  <div class="tags-content">
    <div class="tags-box">
      <h2>Tags Content</h2> 
    </div>
  </div>
</section>`,
  controllerAs: 'tgs',
  controller: TagsCtrl
});


TagsCtrl.$inject = [
    '$scope',
    '$uibModal'];

function TagsCtrl(
    $scope,
    $uibModal) {
    ///////////////////////////////////
    
    this.hello = "hello world";
    
    this.leaveTag = (tag) => tag.hoverDisplay = false;
    
    this.tagHover = (tag) => tag.hoverDisplay = true;
    
    this.tags = [
      { id:0, term: 'apple'},
      { id:1, term: 'butter'},
      { id:2, term: 'charlie'},
      { id:3, term: 'duff'},
      { id:4, term: 'edward'},
      { id:5, term: 'freddy'},
      { id:6, term: 'george'},
      { id:7, term: 'henry'},
      { id:8, term: 'ink'},
      { id:9, term: 'joker'},
      { id:10, term: 'kevin'},
      { id:11, term: 'leon'},
      { id:12, term: 'mary'},
      { id:13, term: 'nancy'},
      { id:14, term: 'olivia'},
      { id:15, term: 'preston'},
      { id:16, term: 'quincy'},
      { id:17, term: 'robyn'},
      { id:18, term: 'steven'},
      { id:19, term: 'teddy'},
      { id:17, term: 'ulysses'},
      { id:18, term: 'victor'},
      { id:19, term: 'winston'},
      { id:20, term: 'xavier'},
      { id:20, term: 'yvette'},
      { id:21, term: 'zander'}
    ];
}

/* Put your css in here */

body {
  font-family: Arial, sans-serif;
}

.tags-hover-container {
    float: left;
    position: fixed;
    z-index: 101;
    left: 240px;
    margin-top: 40px;
    width: 200px;
    height: auto;
}

.tags-column {
  z-index: 1;
  float: left;
  position: relative;
  overflow-y: auto;
  margin-top: 70px;
  max-width: 230px;
  min-width: 230px;
  height: calc(100% - 165px);
}

.tags-column li {
  list-style: none;
}

.tags-container {
  overflow-y: auto;
  height: 320px;
}

.tag-container-container { float: left; position: relative; width: 100%; }

.tag-container { float: left; position: relative; }

.tags-content {
  float: left;
  background: #f0f0f0;
}

.tags-box {
  float: left;
  padding: 20px;
  width: 320px;
  height: 640px;
  background: #4169E1;
}

.tags-box h2 {
  color: #fff;
}

.tag {
  margin: 0 10px 10px 0;
  padding: 9px 10px;
  width: auto;
  color: #fff;
  background: #3D3D3D;
  border-radius: 4px;
  cursor: pointer;
  clear: both;
}

.tag:hover {
  background: #656565;
}

.tags-modal {
  float: left;
  position: fixed;
  z-index: 101;
  left: 100px;
  margin-top: -20px;
  padding: 10px;
  width: 200px;
  height: auto;
  color: white;
  background: blue;
  border-radius: 4px;
}

.tags-modal:before {
    position: absolute;
    top: -8px;
    left: 26px;
    z-index: 99;
    content: '';
    display: block;
    height: 0; width: 0;
    border-bottom: 8px solid blue;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-component></my-component>
  </body>
</html>

最佳答案

终于!是的，对此没有 CSS 解决方案，我必须找出当前鼠标的 y 位置并使用 ng-style 即时更新样式。

TickersPanelComponent

this.hoverTicker = (event, ticker) => {
    MousePosition.set(event);
    const mouseY = MousePosition.current.y;
    ticker.pos = { top: `${mouseY}px` };
    ticker.hoverDisplay = true;
};

TickersPanel 标记(包含传入代码的 tagHover 组件)

<div class="tag-container" ng-mouseleave="tikp.leaveTicker(ticker)">
    <div class="ticker"
         ng-mouseenter="tikp.hoverTicker($event, ticker)"
         ng-click="tikp.selectTicker('portfolio', ticker);">
         <span ng-if="ticker.long && !ticker.hoverDisplay">
            {{ ticker.short }}
         </span>
         <span ng-if="!ticker.long || ticker.hoverDisplay">
            {{ ticker.ticker }}
         </span>
    </div>
    <ticker-hover ticker="ticker"></ticker-hover>
</div>

鼠标位置工厂

const set = (e) => {
    current.x = e.pageX;
    current.y = e.pageY;
}

最后是 tagHover 标记

<div class="ticker-hover-container"
    ng-style="tkhov.ticker.pos" ng-show="tkhov.ticker.hoverDisplay">

^ tkhov 是 controllerAs this

关于javascript - 如何在滚动时使这些 tagHovers 的位置靠近标签并且 tagHover 具有固定位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42209956/