Facebook多欄化(Multi-Column)

使Facebook多欄化,看起來更進步之餘脫離無止境捲動的滑鼠滾輪地獄.純樣式多欄化版本.測試後將更新JS打包樣式的版本.https://greasyfork.org/scripts/535843

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

/* ==UserStyle==
@name         Facebook Multi-Column
@name:zh-TW   Facebook多欄化(Multi-Column)
@version      20260418
@namespace    http://tampermonkey.net/
@description:zh-TW   使Facebook多欄化,看起來更進步之餘脫離無止境捲動的滑鼠滾輪地獄.純樣式多欄化版本.測試後將更新JS打包樣式的版本.https://greasyfork.org/scripts/535843
@description  Create a multi-column Facebook layout for a more modern look, freeing you from the endless scroll mouse wheel hell.after test update Full JScript https://greasyfork.org/scripts/535843
@license      MIT
@author       Dxzy
==/UserStyle== */
 
@-moz-document url("https://www.facebook.com/"), url("https://www.facebook.com/groups/feed/"), url("https://www.facebook.com/?filter=all&sk=h_chr"), url("https://www.facebook.com/?filter=favorites&sk=h_chr"), url("https://www.facebook.com/?filter=friends&sk=h_chr"), url("https://www.facebook.com/?filter=groups&sk=h_chr"), url("https://www.facebook.com/?filter=pages&sk=h_chr"),
regexp("https://www.facebook.com/.*/posts/.*"), regexp("https://www.facebook.com/reel/.*"), regexp("https://www.facebook.com/search/.*"), regexp("https://www.facebook.com/photo.*"), regexp("https://www.facebook.com/profile.php.*"), regexp("https://www.facebook.com/.*/videos/.*"), regexp("https://www.facebook.com/groups/.*"), regexp("https://www.facebook.com/permalink.php?.*"){
 
/* === 個人化設定 custom setup === */
:root {
--column-count: 4; /*所需欄位*/
--column-gap: 25px; /*彼此間隔*/
--max-post-height: 80vh; /*所佔視窗高度*/
--sidebar-width: 60px /*左側寬度*/
}
 
/* 中央容器 main wide */
.x1v0nzow.x1ceravr.x17zi3g0.xvue9z.x193iq5w /*動態、首頁*/
,.x1xwk8fm.x193iq5w /*搜尋*/
,.xsfy40s.x1miatn0.x9f619 /*搜尋*/
{
width: calc(110% - var(--sidebar-width)); /*放大填補縫隙*/
margin-right: -60px
}

/*其它容器 other wide*/
    /*首頁*/
.xornbnt.x1t2pt76.xylbxtu.x1q0g3np.xozqiw3.x1cy8zhl.x1qughib.xeuugli.xs83m0k.x1iyjqo2.x1r8uery.x1n2onr6.x78zum5.x1ja2u2z.x9f619
,/*動態*/
.x1t2pt76.x78zum5.xs83m0k.x1iyjqo2.x1r8uery.xeuugli.x193iq5w.xdt5ytf.x1ja2u2z.x1n2onr6.x9f619
{max-width: 100%;}

/* 左側導航欄 left bar */
.xxzkxad.x9e5oc1 /*首頁左*/
,.xh78kpn.xcoz2nd.x2bj2ny /*動態消息左*/
,.x1vjfegm.x2lah0s.xeuugli /*動態消息左*/
{
max-width: var(--sidebar-width);
min-width: var(--sidebar-width);
position: absolute;
z-index: 1;
}
 
/* 排列 Multi-Column Post */
.x6o7n8i.x1unhpq9.x1hc1fzr > div > div/*首頁 動態*/
,.x1xwk8fm.x193iq5w/*搜尋*/ {
display: flex;
flex-wrap: wrap;
gap: var(--column-gap);
justify-content: flex-start;
align-content: flex-start;
contain: content; /* 限制重繪範圍 */
}
 
/* 控制 control post size 尺寸 */
.x6o7n8i.x1unhpq9.x1hc1fzr > div > div>* /*首頁 動態*/
,.x1xwk8fm.x193iq5w>div /*搜尋*/ {
width: calc((100% - (var(--column-gap) * (var(--column-count) - 1))) / var(--column-count));
max-height: var(--max-post-height);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}

/* === Post zoom 放大 === */
@media (min-width: 1900px) {
.x1qjc9v5.x71s49j.x1a2a7pz {
width: 50%; /* 固定寬度為50% */
max-width: none; /* 移除最大寬度限制 */
margin: 0 25%; /* 左右各25%的空白 */
flex: 0 0 auto; /* 防止flex佈局影響寬度 */
}
}
 
/* === 隱藏元素 hide === */
.x1daaz14.x1t2pt76 /*FB homepage chat(聯絡人)*/
,.xwib8y2.x1y1aw1k.xwya9rg /*homepage Story(限動)*/
,.xq1tmr.xvue9z>.x1yztbdb /*homepage you post bar*/
,footer/*homepage useless ad*/
{
display: none;
}
}