javascript - 制作div(位置:fixed) scroll horizontally

Question

我知道这个主题已经发布得很频繁了，但是到目前为止，所提供的解决方案都没有对我有任何帮助。我的页面左侧有一个侧边栏，我在 CSS 中为其分配了 position:fixed，我想水平滚动它(以及我页面上的所有其他内容)

对于页眉和页脚，我解决了这样的问题:

 $(window).scroll(function ()
{
    $("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
});

但这对我的侧边栏来说效果不佳。这是我的侧边栏的 html:

<div class="fullscreen_block hided">
   <div class="left-sidebar-block">

和 CSS:

.left-sidebar-block { 
position: fixed; 
margin-left: 70px;
}

谁能告诉我如何在不使用上述 JS 代码的情况下解决这个问题？ (任何其他 JS 或 CSS 或 jQuery 都可以)

谢谢!!

Answer 1

首先，我认为您想使用 scrollTop 而不是 scrollLeft。根据您的描述，听起来您希望在用户向下滚动时向左滑动元素。 scrollTop 将为您提供用户滚动的距离。

其次，我建议使用transform 属性而不是margin 属性，只要它满足您的浏览器支持要求即可。滚动技巧通常是性能密集型的，因此您应该尝试使用高性能的 css 属性，例如 transform 和 opacity，而不是较慢的属性，例如 margin、左，和显示。

下面的代码完成了我认为您正在尝试做的事情。 (Codepen 演示:http://codepen.io/regdoug/pen/yyYvaV):

$(window).scroll(function ()
{
    var top = $(window).scrollTop();
    $("left-sidebar-block").css('transform', 'translateX(' + (-top) + "px)")
                      .css('-ms-transform', 'translateX(' + (-top) + "px)")
                      .css('-webkit-transform', 'translateX(' + (-top) + "px)");
});

引用资料

http://www.html5rocks.com/en/tutorials/speed/scrolling/

http://css-tricks.com/almanac/properties/t/transform/

http://caniuse.com/#feat=transforms2d