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。

Answer 2

因为我认为这个主题很有趣，所以我尝试了一下。我认为最简单的方法是在没有插件的情况下完成它。这是我的结果代码，使页面滚动水平：

// set a block variable if we are over another element that scrolls
// if ie would support e.target for scrolling this wouldn't be needed
var blockScroll = false;
$(".scroller").on("mouseenter mouseleave", function (e) {
  blockScroll = e.type === "mouseenter";
})

function scrollFunc (e) {
  // stop if the target is a .scroller and also
  // if there is an indication that a vertical scroll was done
  if (blockScroll || ("wheelDeltaX" in e && e.wheelDeltaX != 0) || e.shiftKey) return;
  // prevent default scrolling (no jumps)
  e.preventDefault();
  // get ammount of scrolling
  var scroll = "wheelDelta" in e ? -e.wheelDelta : (e.detail * 2);
  // use scroll y for scroll x
  window.scrollBy( scroll, 0 );
}

// try attaching the method like the borwser needs it
// this event isn't covered by jquery so I had to do it manually
if (document.addEventListener) { // W3C sort of
  document.addEventListener( "DOMMouseScroll", scrollFunc, false );
  document.addEventListener( "mousewheel", scrollFunc, false );
} else if (document.attachEvent) { // IE way
  document.attachEvent("onmousewheel", scrollFunc);
} else {
  document.onmousewheel = scrollFunc;
}

注意：滚动它的每个元素都必须包含带有此代码的类scroller。如果需要，您可以尝试使用jquerys overflow获取css值，但我不建议这样做。

This is my result！但我不得不说我没有移动设备来测试它。此解决方案仅适用于鼠标滚轮。

如果你有另一个应该滚动的元素，请将我的示例中的document替换为元素节点，将window.scrollBy替换为element.scrollLeft += -scroll。

我可能还要补充一点，滚动永远不会像直接完成那样顺利。

编辑：我还有另外一个想法如何实现这一目标。您可以使页面垂直滚动并在其中放置一个100％大小和固定位置的div。然后使用onscroll事件将内部div的水平滚动与主体的垂直滚动同步。我不知道它会有多好用。

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

2 个答案: