一个关于自动滚动(启用了css's overflow-y)效果的小难题

A little puzzle for autoscroll (css's overflow-y enabled) effect

本文关键字：overflow-y 难题 css 一个 于自动 启用 滚动      更新时间：2023-09-26

有两个div 

<div style="height:150px; overflow:hidden; overflow-y:hidden;">
    <div style="margin:5px; margin-right:25px;" onmouseover="this.style.width=(this.parentNode.offsetWidth-30)+''px''; this.parentNode.style.overflowY=''auto'';" onmouseout="this.style.width=''''; this.parentNode.style.overflowY=''hidden'';">';
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    </div>
 </div>

当鼠标悬停时，出现垂直滚动条(当鼠标离开-消失时)。问题是，这个设计现在不起作用了，因为滚动条在我到达滚动条之前就消失了。是否有可能做到这一点，我可以点击滚动条与我的鼠标和移动滚动条的滑块向上/向下?

重要的是，这个任务应该在没有任何id的情况下解决。"这。

问题是，在鼠标悬停事件中，您通过父级offsetWidth - 30来减少内部div的宽度。这意味着mouseout事件总是在到达滚动条之前触发。您提到应该在不使用id的情况下解决此任务，但这可以通过使用类和:hover伪类的CSS轻松解决。

首先删除内联样式，并附加一个CSS类

<div class="scrollable-on-hover">
    <div> ...
CSS: 

.scrollable-on-hover {
  height: 150px;
  overflow: hidden;
}
.scrollable-on-hover:hover {
  overflow-y: auto;
}
CSS修复:http://jsfiddle.net/NaKKk/1/

如果你被迫使用内联javascript来修复这个问题，你应该可以使用this;

<div style="height: 150px; overflow: hidden;" onmouseover="this.style.overflowY = 'auto';" onmouseout="this.style.overflowY = 'hidden';">
    <div> ...

JS修复:http://jsfiddle.net/NaKKk/2/

在javascript示例中，您会注意到我将mouseover和mouseout事件附加在父元素而不是子元素上。我可以这样做，因为这些事件将从子元素冒泡，并通过它的祖先树。下面是对冒泡事件的一个简单引用:http://www.javascripter.net/faq/eventbubbling.htm

如果使用'firstChild'则正常=)

<div style="height:150px; overflow:hidden; overflow-y:hidden;" onmouseover="this.firstChild.style.width=(this.offsetWidth-30)+'px'; this.style.overflowY='auto';" onmouseout="this.firstChild.style.width=''; this.style.overflowY='hidden';">
<div style="margin:5px; margin-right:25px;">';
123<br>
123<br>
123<br>
123<br>
123<br>
123<br>
</div>

相关文章：