I have a HTML file, which has left pane and right pane.
In the left pane, there are some panels, which contains code and each of them has a scroll bar with it.
Also, the left pane itself has a scroll bar.
The right pane contains comments for the codes and it has a scroll bar with it.
Plus, entire screen has a scroll bar with it.
Line 4 and 5 in the first file and line 7 in the second file is the link to right pane.
When I click line 7 in the second file, it shows the comment for its line in the right pane by scrolling the right pane and the entire scroll bar. If the count of lines are massive, the original position even scrolls out of screen.
What I want is to scroll only the right pane and continue to look at line 7 in the code pane and the comment for it at the same time.
Same thing happens when I click "File2.js Line 7" in the right pane.
How can I manage which scroll bar moves or not?
Target environment is Chrome only.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, ul, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}
header, footer, nav, section, article, aside, figure, figcaption {
display: block;
}
body {
line-height: 1;
}
ol, ul, nav {
list-style: none;
list-style-type: none;
}
/* =============================
common 全体に共通するスタイル
============================= */
.wrapper {
margin: 150px auto;
max-width: 1408px;
min-width: 1020px;
}
.inner {
min-width: 972px;
max-width: 1360px;
margin: 0 24px 28px 24px;
}
.el-flex {
display: flex;
}
a {
opacity: 1;
color: #404040;
cursor: pointer;
text-decoration: none;
}
button {
background: none;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.modal {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background-color: rgba(87, 87, 87, 0.7);
z-index: 10;
}
.buttons {
margin-left: auto;
justify-content:flex-end;
}
.submit-button {
width: 63px;
height: 32px;
background: #3399ff;
margin-top: 8px;
color: #fff;
border-radius: 4px;
margin-left: auto;
}
.buttons .cancel-button {
width: 95px;
height: 32px;
margin-top: 8px;
color: #404040;
border-radius: 4px;
}
/* =============================
基本設定
============================= */
html {
font-size: 62.5%;
}
body {
background-color: #FAFAFA;
;
color: #404040;
font-family: "Noto Sans JP";
line-height: 1.6875;
font-size: 1.4rem;
}
.pro-inner {
min-width: 972px;
max-width: 1360px;
}
.pro {
background-color: #fff;
margin: 24px 0 24px;
border-radius: 8px;
border: 1px solid #c6c6c6;
z-index: 1;
}
.pro-area {
height: 78px;
display: flex;
border-bottom: 1px solid #c6c6c6;
}
.pro-area-left {
margin-top: 24px;
}
.pro-area-left h2 {
color: #404040;
font-size: 2rem;
font-weight: 700;
margin-left: 32px;
margin-right: 12px;
}
.pro-area-left p {
width: 158px;
height: 28px;
margin-top: 2px;
border-radius: 100px;
text-align: center;
line-height: 28px;
color: #30a66d;
border: 1px solid #37be7d;
}
.pro-area-left img {
width: 4px;
height: 16px;
margin-top: 8px;
margin-left: 18px;
}
.pro-area-right {
margin-top: 24px;
margin-right: 32px;
margin-left: auto;
}
.pro-area-right ul li {
margin-right: 16px;
}
.pro-area-right ul li.mark img {
width: 28px;
height: 28px;
}
/* =============================
各ファイル＆コメント
============================= */
.file-content-lists {
max-width: 1000px;
width: 100%;
height: 1073px;
margin-top: 24px;
overflow-y: scroll;
}
/* スクロールの幅の設定 */
#fileScroll::-webkit-scrollbar {
width: 10px;
}
/* スクロールの背景の設定 */
#fileScroll::-webkit-scrollbar-track {
margin-top: 16px;
border-radius: 3px;
box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
#fileScroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #C6C6C6;
}
.file-content-wrap {
height: 522px;
margin-bottom: 24px;
background-color: #fff;
border-radius: 8px;
border: 1px solid #c6c6c6;
margin-right: 30px;
position: relative;
}
section.code{
height: 472px;
overflow: scroll;
background: #00050a;
border-radius: 0 0 8px 8px/0 0 8px 8px;
margin-top: 8px;
padding-left: 32px;
}
ol.linenums li{
background: #00050a !important;
pointer-events:none;
}
ol.linenums li span.generated{
pointer-events:auto;
display:inline-block;
width:100%;
}
ol.linenums li.normal:hover,ol.linenums li.clicked{
background-color: #292929 !important;
}
ol.linenums li.active::before{
content: "";
display: inline-block;
background: url(../../Images/action/comment_outline.png);
width: 13px;
height: 13px;
position: relative;
top:0;
left: -50px;
background-size: contain;
pointer-events:auto;
margin-left: -13px;
}
ol.linenums li.active:hover::before {
background: url(../../Images/action/comment.png);
background-size: contain;
}
.file-content-list h3 {
font-size: 1.6rem;
margin-left: 16px;
margin-top: 12px;
}
.file-content-list-date {
margin-top: 17px;
color: #757575;
}
.trash {
cursor: pointer;
}
.file-content-list ul {
margin-left: auto;
}
.file-content-list ul img {
width: 14px;
height: 18px;
margin-top: 16px;
margin-right: 15px;
margin-left: 20px;
}
.file-content-comment {
width: 450px;
margin-top: 24px;
margin-left: 10px;
}
/* スクロールの幅の設定 */
#comment-scroll {
height: 1023px;
overflow-y: scroll;
}
#comment-scroll::-webkit-scrollbar {
width: 10px;
}
/* スクロールの背景の設定 */
#comment-scroll::-webkit-scrollbar-track {
margin-left: 12px;
border-radius: 3px;
box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
#comment-scroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #C6C6C6;
}
.file-content-comment-ttl {
width: 303px;
}
.file-content-comment h3 {
font-size: 1.4rem;
color: #757575;
}
.file-content-comment-input {
margin-left: auto;
}
.file-content-comment input {
width: 18px;
height: 18px;
margin-right: 8px;
}
.file-content form {
padding-right: 12px;
}
.file-content-comment-textarea {
width: 303px;
height: 100px;
margin-top: 12px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #c6c6c6;
color: #9d9d9d;
}
.comment-category {
width: 275px;
height: 32px;
border-radius: 4px;
border: 1px solid #c6c6c6;
color: #9d9d9d;
margin-bottom: 4px;
}
.category-img {
width: 14px;
height: 14px;
margin-left: 10px;
margin-top: 3px;
}
.comment-important {
width: 275px;
height: 32px;
border-radius: 4px;
border: 1px solid #c6c6c6;
color: #9d9d9d;
}
.comment-submit {
padding-left: 240px;
}
.comment-list {
width: 303px;
margin-top: 18px;
background-color: #fff;
border-radius: 8px;
border: 1px solid #c6c6c6;
}
.comment-list {
padding: 12px 16px;
}
.comment-list-img {
height: 28px;
line-height: 28px;
}
.comment-list-img img {
width: 28px;
height: 28px;
}
.comment-list-txt {
font-size: 1.2rem;
line-height: 28px;
margin-left: 8px;
cursor: pointer;
}
.comment-list-file-deleted-txt {
font-size: 1.2rem;
line-height: 28px;
margin-left: 8px;
}
.comment-list-name {
width: 96px;
height: 18px;
background-color: #f0f7ff;
font-size: 1rem;
color: #0080ff;
text-align: center;
line-height: 18px;
}
.comment-list-icon {
width: 17px;
height: 17px;
margin-left: 9px;
line-height: 18px;
}
.comment-list-important {
margin-left: 2px;
font-size: 1rem;
color: #757575;
line-height: 18px;
}
.comment-list-content {
width: 271px;
margin-top: 12px;
margin-bottom: 12px;
font-size: 1.4rem;
}
.comment-list-date {
font-size: 1.2rem;
color: #757575;
margin-right: 100px;
margin-bottom: 12px;
}
.comment-list-reply {
width: 271px;
margin-top: 8px;
padding-left: 8px;
border: 1px solid #c6c6c6;
border-radius: 4px;
font-size: 1.4rem;
color: #757575;
line-height: 2rem;
}
.comment-reply {
width: 255px;
margin-top: 12px;
margin-bottom: 12px;
font-size: 1.4rem;
}
.comment-list-wrap {
border-left: 1px solid #C6C6C6;
padding-left: 12px;
}
.file-content-comment-txt {
width: 316px;
backgroun
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
