構建一個滾動控制器，需要反轉它

我的代碼允許在底部垂直滾動來控制頂部橫向滾動。構建一個滾動控制器，需要反轉它

你會看到的顏色通過梯度轉移。工作得很好。問題是，我似乎無法完成相反的工作。在頂部的水平滾動控件在底部滾動。

任何想法？

這裏的，使得它的工作腳本：

// Add event listener for scrolling 
$("#bottom").on("scroll", function bottomScroll() { 
    var scrolledleft = parseInt($("#bottom").scrollTop()) * 1; 
    console.log(scrolledleft + scrolledright) 
    $("#top").scrollLeft(scrolledleft + scrolledright) 
}) 

//Move right column to bottom initially 
$("#top").scrollLeft($("#top").height()) 

//Get actual distance scrolled 
var scrolledright = parseInt($("#top").scrollLeft())

來源

2016-01-29 Rourke McLaren

你在需要滾動事件處理程序#top，對於初學者來說，類似於#bottom的處理程序。 – James

是的，我試過了，對我來說棘手的部分是適當地轉換方法，將scrollTop轉換爲scrollLeft也許？ –

您的事件處理程序需要暫時取消對方，以便它們不會同時觸發。你想根據當前的scrollLeft /（容器寬度）來計算你的位置百分比，然後將這個百分比應用到另一個元素，同樣對於頂部/高度。另外我在CSS中將#top的高度改爲50％。

var handler = function (e) { 
 
    var src = e.target; 
 
    
 
    // the first element that triggers this function becomes the active one, until it's done 
 
    if (!activeScroller) activeScroller = src.id; 
 
    else if (activeScroller != src.id) return; 
 
    
 
    var $b = $("#bottom"); 
 
    var $t = $("#top"); 
 

 
    var scrollH = $("#bottom-content").height() - $b.height(); 
 
    var scrollW = $("#top-content").width() - $t.width(); 
 

 
    var scrollPct = 0; 
 

 
    if (src.id == "top") { 
 
    if (scrollW > 0) { 
 
     scrollPct = $t.scrollLeft()/scrollW; 
 
    } 
 

 
    $b.scrollTop(scrollH * scrollPct); 
 
    } else { 
 
    if (scrollH > 0) { 
 
     scrollPct = $b.scrollTop()/scrollH; 
 
    } 
 

 
    $t.scrollLeft(scrollW * scrollPct); 
 
    } 
 
    
 
    // give all animations a chance to finish 
 
    setTimeout(function() { activeScroller = ""; }, 100); 
 
}; 
 
var activeScroller = ""; 
 
$("#top,#bottom").on("scroll", handler);

#top { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    background: red; 
 
} 
 

 
#top-content { 
 
    height: 100%; 
 
    width: 2000px; 
 
    background: linear-gradient(90deg, red, blue); 
 
} 
 

 
#bottom { 
 
    position: absolute; 
 
    margin: auto; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    position: fixed; 
 
    overflow: auto; 
 
    background: green; 
 
    z-index: 100; 
 
} 
 

 
#bottom-content { 
 
    height: 2000px; 
 
    width: 100%; 
 
    background: linear-gradient(0deg, orange, green); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="top"> 
 
    <div id="top-content"></div> 
 
</div> 
 
<div id="bottom"> 
 
    <div id="bottom-content"></div> 
 
</div>

來源

2016-01-30 16:53:37 James

完美的作品，謝謝詹姆斯 –

看看這個： https://jsfiddle.net/1p7gp72h/1/

我不知道你的最終目標是在這裏。

$("#top").on("scroll", function topScroll() { 
    var scrolledleft = parseInt($("#top").scrollTop()) * 1; 

    $("#bottom").scrollLeft(scrolledleft + scrolledright) 
}); 

#top { 
    top: 0; 
    right: 0; 
    left: 0; 
    width: 5000px; 
    height: 100%; 

    overflow: auto; 
    background: red; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space:nowrap; 
}

來源

2016-01-29 21:30:13

如果您向下滾動我的小提琴的下半部分，您會看到頂部部分也從左向右滾動。我試圖讓上半部分的滾動功能和下半部分滾動功能一樣。 –

是否要在屏幕中間出現水平滾動條？通常它們只出現在瀏覽器窗口的底部。你想要水平滾動鏈接垂直滾動？ –

向左滾動::

$('div').scrollLeft(1000);

滾動恢復正常/滾動向右::

$('div.slick-viewport').scrollLeft(-1000);

來源

2016-07-27 06:49:42 DDave

構建一個滾動控制器，需要反轉它

回答

相關問題