javascript - 垂直同步两个 div 的滚动。 (将两个 div 一起滚动)

标签 javascript html css scroll bootstrap-4

我在一个可滚动的框中有一个文本,在这个框外还有属于文本中某些段落/部分的标题。现在我希望当我滚动框内的文本时,框外的标题也会滚动。我正在寻找一种方法将特定文本部分链接到特定标题,以便它随文本滚动。

截图如下: enter image description here

这是我这部分的代码:

<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>

提前感谢您的帮助!

最佳答案

我认为对于该设计,最简单的方法可能是将标题保留在同一个 div 内,并使用负的左边距来给人一种它们在外部的错觉。任何 JS 解决方案都需要使用滚动监听器,如果不加以限制,这可能会导致性能问题,或者如果受到限制,可能会导致性能问题。我没有时间编写示例版本,但希望这对您有所帮助

关于javascript - 垂直同步两个 div 的滚动。 (将两个 div 一起滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54118255/

相关文章:

html - 如何让所有页面采用用户定义的浏览器缩放级别 (css/html)?

javascript - Bootstrap 模式打开时选择文本输入

css - bootstraps col嵌套继承main col样式

Javascript 获取变量名

javascript - AngularJS : multiple asynchronous AJAX calls

php - 之前将我发送到移动

javascript - 使用javascript在html中添加多个文本框

html - 悬停一个元素并影响另一个元素

html - 如何使网站的标题全宽?

JavaScript费用计算器