javascript - 在 div 末尾时溢出不起作用

Question

我的 div 中的段落在悬停时创建第二行 -

如果你滚动到框的末尾，你会看到如果你将鼠标悬停在最后一段上并且当它的第二行被扩展时，如果你然后尽可能向下滚动，这些段落就会出现故障并且overflow 不会再扩展了，我想是因为已经达到 overflow 的最大值所以不会再扩展了，我该怎么办？

 
 
 node = ["systems development highways junior", "Dale", "efefefefe efef", "dadadadada dadadad adadadadadad", "systems biggest development pot ever in the hands of the most junior fishermen", "systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen", ]
 
 d3.selectAll('#titleTable').selectAll('td')
      .data(node)
      .enter()
      .append('divname')
      .html(node => {
        if (node && node.length > 35) {
          var before = node.slice(0, node.indexOf(' ', 28));
          var after = node.slice(node.indexOf(' ', 24));
          var beforeReplacementParagraph = node.slice(0, node.indexOf(' ', 24));

          return ` 
           <p class="nodeParagraph"> 
           <span class="hide-on-hover">${before}... </span>
           <span class="show-on-hover">${beforeReplacementParagraph}</span>
         </p>
           <p class="extraNodeParagraph">${after} </p>
         `
            
        }

        return `
         <p class="nodeParagraph">${node} </p>`
      })
      
  

.totalWrapper {
  position: absolute;
  width: 110%;
  height: 200%;
  z-index: 1;
}

.wrapper {
  width: 370px;
  height: auto;
  position: sticky;
  left: 152px;
  top: 200;
  z-index: 3;
}

.divname {
  position: relative;
  z-index: 1000;
}

.cropcircle {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #eee no-repeat center;
  background-size: cover;
}

.nodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 2;
  left: 20px;
  top: 20px;
  width: 265px;
}

.nodeParagraph:hover + .extraNodeParagraph {
  display: block;
}

.extraNodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 2;
  left: 47.5px;
  top: 10px;
  width: 265px;
  display: none;
  height: auto;
}

.nodeParagraph .show-on-hover{
  display: none;
}
.nodeParagraph:hover .hide-on-hover{
  display: none;
}

.nodeParagraph:hover .show-on-hover{
  display: block;
}

.headerDiv {
  position: relative;
  z-index: 1001;
  height: 20px;
  width: 295px;
  background: #fff;
  clear: both;
  margin-top: 90px;
  left: 18px;
}

.headerText {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.headerTextIndividual {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.rightBox {
  font-family: $font-family-base;
  z-index: -1;
  position: absolute;
  width: 295px;
  float: left;
  background:#fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  height: auto;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  padding-bottom: 20px;
  // overflow: hidden;
  left: 18px;
  max-height: 300px;
  overflow-y: auto;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="totalWrapper" class="totalWrapper" (click)="hideBox()">
       <div class="wrapper">
           <div id="headerDiv"class="headerDiv">
            <h1 id="headerText"class="headerText">{{ 'More Engagements' | translate }} </h1>
          </div>
          <div id="rightBox" class = "rightBox">
            <table >
              <tr id="titleTable" class="titleTable">
                <td><div id="divname" class = "divname"></div></td>
              </tr>
            </table>
         </div>
       </div>
       </div>

我的预期结果是，即使到达底部，框仍会扩展以允许第二段，这意味着没有闪烁。

Answer 1

将鼠标悬停在文本行上没有问题，但是当您将鼠标触摸到扩展段落内的某些区域时，它会出现故障。

快速修复将添加如下所示的 css

.nodeParagraph:hover + .extraNodeParagraph:hover {
  display: block;
}

node = ["systems development highways junior", "Dale", "efefefefe efef", "dadadadada dadadad adadadadadad", "systems biggest development pot ever in the hands of the most junior fishermen", "systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen","systems biggest development pot ever in the hands of the most junior fishermen", ]
 
 d3.selectAll('#titleTable').selectAll('td')
      .data(node)
      .enter()
      .append('divname')
      .html(node => {
        if (node && node.length > 35) {
          var before = node.slice(0, node.indexOf(' ', 28));
          var after = node.slice(node.indexOf(' ', 24));
          var beforeReplacementParagraph = node.slice(0, node.indexOf(' ', 24));

          return ` 
           <p class="nodeParagraph"> 
           <span class="hide-on-hover">${before}... </span>
           <span class="show-on-hover">${beforeReplacementParagraph}</span>
         </p>
           <p class="extraNodeParagraph">${after} </p>
         `
            
        }

        return `
         <p class="nodeParagraph">${node} </p>`
      })

.totalWrapper {
  position: absolute;
  width: 110%;
  height: 200%;
  z-index: 1;
}

.wrapper {
  width: 370px;
  height: auto;
  position: sticky;
  left: 152px;
  top: 200;
  z-index: 3;
}

.divname {
  position: relative;
  z-index: 1000;
}

.cropcircle {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #eee no-repeat center;
  background-size: cover;
}

.nodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 2;
  left: 20px;
  top: 20px;
  width: 265px;
}

.nodeParagraph:hover + .extraNodeParagraph {
  display: block;
}

.nodeParagraph:hover + .extraNodeParagraph:hover {
  display: block;
}

.extraNodeParagraph {
  font-size: 14px;
  letter-spacing: 0.03px;
  cursor: pointer;
  font-family: $font-family-base;
  position: relative;
  font-weight: 300;
  z-index: 2;
  left: 47.5px;
  top: 10px;
  width: 265px;
  display: none;
  height: auto;
}

.nodeParagraph .show-on-hover{
  display: none;
}
.nodeParagraph:hover .hide-on-hover{
  display: none;
}

.nodeParagraph:hover .show-on-hover{
  display: block;
}

.headerDiv {
  position: relative;
  z-index: 1001;
  height: 20px;
  width: 295px;
  background: #fff;
  clear: both;
  margin-top: 90px;
  left: 18px;
}

.headerText {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.headerTextIndividual {
  position: relative;
  color: #1A2F59;
  left: 13px;
  top: 5.5px;
  font-size: 16px;
}

.rightBox {
  font-family: $font-family-base;
  z-index: -1;
  position: absolute;
  width: 295px;
  float: left;
  background:#fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  height: auto;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  padding-bottom: 20px;
  // overflow: hidden;
  left: 18px;
  max-height: 300px;
  overflow-y: auto;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="totalWrapper" class="totalWrapper" (click)="hideBox()">
       <div class="wrapper">
           <div id="headerDiv"class="headerDiv">
            <h1 id="headerText"class="headerText">{{ 'More Engagements' | translate }} </h1>
          </div>
          <div id="rightBox" class = "rightBox">
            <table >
              <tr id="titleTable" class="titleTable">
                <td><div id="divname" class = "divname"></div></td>
              </tr>
            </table>
         </div>
       </div>
       </div>