垂直同步两个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解决方案都需要使用滚动侦听器，如果不进行限制，则可能会导致性能问题；如果受到限制，则可能看起来很混乱。 我没有时间编写示例版本，但希望对您有所帮助