使用鼠标滚轮在悬停时滚动div

时间:2016-03-14 15:10:13

标签: javascript jquery html css

我想要的是只使用鼠标滚轮滚动光标所在的div(不使用滚动条)。

感谢任何帮助。

3 个答案:

答案 0 :(得分:1)

您可以使用jquery-scrollLock,它会将鼠标滚轮锁定在容器内,防止其传播到父元素。

HTML:

<div data-scrollLock>
 content... 
</div>

JavaScript的:

$('[data-scrollLock]').scrollLock();

Demo

答案 1 :(得分:0)

您必须使用overflow CSS属性。

.scroll {
 height: 100px;
  overflow: scroll;
  border: 1px solid gray;
}  
<p>Some content</p>
<div class="scroll">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elit accumsan est aliquet aliquam. In eu finibus sapien, eget luctus lacus. Mauris consequat, lorem sodales dictum placerat, velit lectus gravida ligula, in euismod nisl purus non ante. Etiam pretium neque eros, sodales volutpat erat tempus eu. Aliquam erat volutpat. Aenean ac turpis eu est eleifend malesuada. Pellentesque mauris purus, varius ut laoreet at, ultricies id turpis. Quisque sollicitudin quis tellus a eleifend. In eget euismod urna, vestibulum porttitor velit. Duis auctor, erat a tempor elementum, quam lorem pulvinar nulla, sit amet lobortis magna diam a ex. Nam cursus varius pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque quis ligula id leo imperdiet finibus a eget risus. Ut sagittis luctus libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elementum nibh.
</div>
<p>Some content</p>

更多信息:https://developer.mozilla.org/en/docs/Web/CSS/overflow

答案 2 :(得分:0)

我只是想指出你的问题写得不好,例如:&#34;它用鼠标滚轮滚动&#34 ;;这意味着你的鼠标滚轮开始移动或者它与鼠标滚轮有关,它不是,或者另一个例子:&#34;当你悬停在左侧边栏上时,它会滚动鼠标滚轮&#34 ,谁滚动什么?什么是it

我必须登录gmail收件箱才能看到你在说什么,你描述的内容与我看到的完全不同,无论如何,如果你添加了一个gif也可能会很好,但无论如何,你想要探索的是CSS(特定的溢出和位置固定属性),它实际上并不是与javascript相关的。应该解决悬停事件没有滚动,至少不是我注意到,我看到了点击。我将添加一个简单的JavaScript来帮助您入门,

var elementToScrollTo = document.getElementById("elementToScrollTo");
// you could also use jQuery, var elementToScrollTo = $("#elementToScrollTo")[0]; 

elementToScrollTo.scrollTop = elementToScrollTo.scrollHeight; // scrolls to the end of the div

此代码的主要内容是向您展示scrollTop属性的功能,通过查找div的上限与您向下滚动到的元素之间的距离,您可以轻松地做到这一点 - 甚至用间隔动画它。

请注意,这里有很多问题,你应该学习如何解释自己。 我希望我能帮忙。

相关问题