3

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

我也有网站的某些区域或内容 div，它们具有垂直滚动的宽度和高度（溢出-y：滚动）。当您的鼠标悬停在可以滚动内容的垂直滚动框上时，这将是理想的选择。

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

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

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

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

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

4

2 回答 2

0

因为我觉得这个话题很有趣，所以我尝试了一下。我认为最简单的方法是不使用插件。这是使页面水平滚动的结果代码：

// 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带有此代码的类。如果需要，您可以尝试overflow使用 jquery 获取值，css但我不建议这样做。

这是我的结果！但我不得不说我没有移动设备来测试它。此解决方案仅适用于鼠标滚轮。

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

我还可能不得不补充一点，滚动永远不会像直接完成那样平滑。

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

于 2013-01-14T09:56:47.240 回答
0

您可以使用带有 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"}); });
  }

  );

现场演示

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

于 2013-01-14T09:39:28.647 回答