如何更改滾動方向

-3

我喜歡爲特定列更改相反方向的滾動方向。我試圖搜索谷歌，但我沒有找到任何解決方案。舉個例子，藉此...如何更改滾動方向

共有三列，

左，中，右。每列高度是5000px。中心列的負邊距爲4500px。現在，當用戶滾動時，左側和右側應該如常，但中心應該從下往上滾動。希望你明白了。

範例網站：http://www.ballantyne.it/

.left{ 
height:5000px; 
} 

.center{ 
height:5000px; 
margin-top:-4500px; 
} 

.right{ 
height:5000px; 
}

來源

2013-02-08 Ashok

你怎麼可以滾動無形的內容？ – Morpheus 2013-02-08 14:02:24

查看本網站例如 - http://www.ballantyne.it/ – Ashok 2013-02-08 14:05:07

您確定從可用性的角度來看這是一個好主意嗎？用戶期望滾動以特定方式運行，但通常不是一個好主意來改變它。在該樣本網站上滾動令我噁心。 – cimmanon 2013-02-08 14:18:22

你必須添加一個容器的中心柱，設置它的溢出爲隱藏，高度窗口的高度，然後使用$(window).scroll()事件追加$(document).height() - $(window).scrollTop()到中心柱 - 這應該對於

編輯工作：這裏是代碼http://jsfiddle.net/yLHeC/30/和解釋：

$(document).ready(function(){ 
    var CONSTANT_OFFSET = -200; // starting position 
    $(window).scroll(function(){ 
     $('.center').css('margin-top', CONSTANT_OFFSET + $(this).scrollTop()*2 + 'px'); 
    }).scroll(); 
});

來源

2013-02-08 14:05:33 pwolaq

謝謝。有用。 – Ashok 2013-02-09 04:10:44

在我的示例中，滾動位置被鎖定到相鄰列的高度，所以移動量是計算比率並因此是精確的。

http://jsfiddle.net/kuxi/xNSTb/

$('.right').scrollTop(
    ($('.right .content').height() - $(window).height()) 
    * 
    (1 - $(window).scrollTop()/($('.left .content').height() - $(window).height())) 
);

來源

2013-03-19 21:54:47 Lupo

如何更改滾動方向

回答

相關問題