垂直同步兩個div的滾動。 （同時滾動兩個div）

Question

我在一個可滾動的框中有一個文本，並且該框之外的標題也位於該文本的某些段落/節中。 現在，當我滾動框內的文本時，框外的標題也會滾動。 我正在尋找一種將某些文本部分鏈接到某個標題的方法，以便它隨文本滾動。

這是屏幕截圖：

這是本節的代碼：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="section"> <div class="container-fluid"> <div class="row"> <div class="col-sm-5"> <img src="images/unterschiede.png" id="unterschiedeImg" class="img-responsive"> </div> <div class="col-sm-7"> <div class="col-sm-2 padding0 hidden-xs"> <p class="ij-p heading-p text-center margintop200">Schreibweise </p> <p class="ij-p heading-p text-center margintop320">Grundformen</p> </div> <div class="col-sm-10 onlyPaddingRight20 "> <div class="borderwhite"> <p class="ij-p heading-p visible-xs">Schreibweise</p> <p class="ij-p">Persisch ist im Deutschen die Bezeichnung der Amtssprache im Iran. Offiziell heißt sie dort Zaban-e Farsi «زبان فارسی». Farsi gehört zur indoeuropäischen Sprachfamilie und wird der iranischen Untergruppe zugeordnet.</p> <p class="ij-p">Die Farsi Schriftzeichen werden <a class="basicLink" onclick="displayToggel()">von rechts nach links geschrieben und gelesen</a>. Die zahlen jedoch werden wie im Lateinischen von rechts nach links geschrieben, „Parsi“ und „Persisch“ sind beide Synonyme von „Farsi“, nur dass sie genauer gesagt in Bezug auf die zeitgeschichtliche Sprachentwicklung von Farsi verwendet werden. Der Begriff „Parsi“ hat sich wegen des fehlenden P-Lauts im Laufe der Jahrhunderte zu „Farsi“ verwandelt. Das älteste Beweisdokument des Altpersischen lässt sich auf das 6. Jh. v. Chr. zurückverfolgen. </p> <p class="ij-p heading-p visible-xs">Grundformen</p> <p class="ij-p">Das persische Alphabet „Alebfa“ besteht aus 32 Buchstaben, die man in 18 Grundformen einteilen kann. Es ähnelt sehr dem arabischen Alphabet, wurde aber modifiziert. Konkret wurden vier weitere Buchstaben hinzugefügt und zwei Buchstaben in der Schreibweise verändert. Diakritischezeichen werden selten in der persischen Sprache eingesetzt. Ausnahmen: Fremdwörter, Grundschulbücher, der heilige Koran. </br> </br>Anatomie </br> </br>Glyphen im Lateinischen stehen normalerweise auf einer Grundlinie mit fünf vertikalen Hauptbezugsebenen: Grundlinie, x-Höhe, Oberlänge, Unterlänge und Kappenhöhe.  Im Gegensatz dazu sind die persischen Glyphen weniger eingeschränkt, da den Typedesignern eine größere Anzahl an unsichtbaren typografischen Ebenen zur Verfügung stehen. Die kalligraphischen Regeln für sich in typografische Richtlinien zu übersetzen. </br>Anstelle des klassischen Grundlinienaufbaus der lateinischen Schrift, werden in der persischen Anatomie für die Oberlänge die Begriffe Himmel 1 und Himmel 2 (خط ارش), für die x-Höhe die Augenhöhe 1 (کرسی بصری) für die Grundlinie (خط کرسی)der Begriff Augenhöhe 2 und für die Unterlänge der Begriff Boden (خط پایین) verwendet. Das Liniensystem der persischen Anatomie, lässt sich zudem durch zwei weitere unsichtbare Linien ergänzen Imaginäre Ebene (کرسی فرضی), wodurch dem Schriftgestalter eine Vielzahl an kreativen gestalterischen Möglichkeiten offen steht. Eine humanistische Schriftart, die von den kursiven Naskh-Skripten abgeleitet ist, kann bis zu zwölf imaginäre typografische Ebenen verwenden. Das bedeutet, dass Schriftgestalter, die aus dem lateinischen Schriftraum stammen, ein gewisses Grundwissen über persische kalligraphische Stile und Systeme besitzen müssen, um kreativ sein zu können. Die Schriftzeichen haben eine Kombination aus verbundenen und eigenständigen Buchstaben. Es gibt Regeln, für die Buchstabenformen gestreckt (Variabel) werden können.</p> </div> </div> </div> </div> </div> </div> 

預先感謝您的幫助！

Answer 1

我認為，對於該設計，最簡單的事情可能是將標題保持在同一div內，並使用負的左邊界給人以錯覺，使其位於外部。 任何JS解決方案都需要使用滾動偵聽器，如果不進行限制，則可能會導致性能問題；如果受到限制，則可能看起來很混亂。 我沒有時間編寫示例版本，但希望對您有所幫助