jquery - 带有鼠标检测的水平jquery滚动也可以在div中滚动overflow-y

Question

所以这一直是我在这个项目上的一个麻烦点。我想做的是创建一个水平滚动网站，也支持鼠标滚轮，用滚轮在 X 上滚动。

我还有网站或内容 div 的某些区域，其宽度和高度可以垂直滚动(overflow-y:scroll)。当您的鼠标悬停在垂直滚动框上时，您可以滚动其中的内容，这将是理想的选择。

我使用 Tiny Scrollbar 做了一个快速演示 http://baijs.nl/tinyscrollbar/并发布了我正在尝试在这里做的事情:

http://leighmcd.com/slider/demo/

基本上，当用户将鼠标悬停在橙色上时，我希望橙色内容框具有垂直滚动。

我的 JS 知识有限，无法破解现有插件，因此任何建议将不胜感激。

该网站是为 IE8+ 用户构建的。

Answer 1

您可以将 Hover 函数与 Jquery 结合使用并进行一些 Css 调整来实现这一点，

HTML

<div id="test">
  Your text goes here...
</div>

CSS

#test
{
  background-color:orange;
  overflow:hidden;
  width:200px;
  height:200px;
}

Jquery

$(document).ready(

    function()
    {
    //Note: overflow:auto will bring the V-scroll bar 
    //at the same time overflow:hidden will hide that.
    $("#test").hover(function(){ $(this).css({"overflow":"auto"}); },
    function(){ $(this).css({"overflow":"hidden"}); });
  }

  );

Live Demo

如果您需要任何进一步的说明，请访问this .