可能是某次更新後, 在 iTerm2下的 Trackpad兩指上下滑動時, 發現只會出現指令的前後則內容, 而無法控制畫面內容的上下滾動.
查了一下資料, 有這篇: https://superuser.com/questions/1753719/how-do-i-get-mouse-scroll-in-less-to-work-in-iterm2-like-it-does-in-terminal
不過我原本的 Scroll wheel sends arrow keys when in alternate screen mode設定就是 Yes了, 而且從字義上來看反而應該要選 No才對, 調整後, 果然一切正常了, 太好了.
如何選到這個選項? 左上角的 [iTerm2] [Settings] [Advanced] 捲到 Mouse 這個區塊, 就可以找到這個設定囉.
才寫了”半浮動DIV區域”這個文章 (link), 又發現還有另一種應用情境, 就是捲到下面, 若半浮動區域的底部觸到了 footer , 則要順勢往上, 不再固定.
參考應用如: http://www.yinshiweb.com/ 右側的側欄.
先來看看原始的長相, 一樣是上面 top, 中間 main, 並含有 content 及 flow_div 兩個區域, 還有最下方的 footer. 不含捲動的狀況如: http://sample.diary.tw/29/o.htm
接下來要加上程式碼, 原來的半浮動DIV區域, 只需要用 CSS 配合捲動 event 就可以達成, 但若在浮動區域觸底時, 要跟著捲動上去, 就必須將該 absolute css 的 top 位置用 footer 的 top 減去 flow_div 的高度才行, 不過這個值是動態的, 所以就只能在 runtime 時, 用 jQuery 的 css 屬性來給定, 先看浮動及跟著捲的兩個狀態配合的 css:
.fixed{
position:fixed;
top:0px;
}
.absolute{
position: absolute;
/*top: should be top2 value, modified by jQuery*/
}
其中的 absolute 的 top 得由後面的程式來給定及移除, javascript 如下:
$(document).ready(function(){
// calculate the original top
var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));
var top2 = $('#footer').offset().top - $('#flow_div').height();
$(window).scroll(function (event){
var y = $(this).scrollTop();
if(y>=top){
if(y<top2){
// state 3.
$('#flow_div').addClass('fixed');
$('#flow_div').removeClass('absolute');
$('#flow_div').css('top', '0px');
}else{
// state 2.
$('#flow_div').removeClass('fixed');
$('#flow_div').addClass('absolute');
$('#flow_div').css('top', top2 + 'px');
}
}else{
// state 1.
$('#flow_div').removeClass('fixed');
$('#flow_div').removeClass('absolute');
$('#flow_div').css('top', '0px');
}
});
});
一樣要先算出 top 及 top2 兩個值, 然後在 scroll event 中判斷三種狀況,
state 1. 原始狀態, 還沒捲到 flow_div
state 2. 捲到 flow_div 了, 但底部還未頂到 footer
state 3. 捲到 flow_div 底部頂到 footer 了
完成的結果請參考: http://sample.diary.tw/29/2.htm
一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.
其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.
除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.
程式的實作方式利用 jQuery 來進行, 先看程式碼:
$(document).ready(function(){
// calculate the original top
var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event){
var y = $(this).scrollTop();
if(y>=top){
$('#flow_div').addClass('fixed');
}else{
$('#flow_div').removeClass('fixed');
}
});
});
在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.
其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.
很有意思的一個排版特效.