Я хотел бы использовать теги привязки для прокрутки внутри div на веб-странице. Однако, когда я нажимаю на тег привязки, вся страница переходит к тегу привязки внутри div.
Содержимое внутри div должно прокручиваться без автопрокрутки тела веб-страницы.
Я искал в Google и пытался понять это в течение нескольких недель, но пока не нашел приемлемого решения. Кажется, это тоже действительно часто задаваемый вопрос.
Я очень мало знаю о javascript, но из того, что я понял, кажется, есть два возможных способа сделать это:
1. Чтобы тело страницы можно было прокручивать только колесиком мыши / вручную, а не с помощью якорных тегов. Это применимо только к телу, а не к другим элементам.
-or-
2. Чтобы перейти к тегу привязки в div и отменить процесс до того, как он повлияет на тело.
Бонусом было бы, если бы он не добавлял тег привязки к URL-адресу.
Вот несколько дополнительных ссылок на похожие вопросы, могут быть идеи, с которыми вы могли бы работать: кажется многообещающим, не удалось заставить его работать Прокрутка внутри div без перемещения страницы
использует event.preventDetfault () или event.returnValue = false, может работать для тела после прокрутки ссылки привязки вправо http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/
другие идеи для решения подобных проблем Как предотвратить прокрутку страницы при прокрутке элемент DIV?
Как перейти к тегу привязки в прокручиваемом div, не заставив весь браузер спрыгнуть вниз?
другие подходы к аналогичному вопросу Ссылка привязки HTML без прокрутки или перехода
Вот образцы HTML и CSS с соответствующими элементами. Вы можете изменить размер окна браузера, чтобы на главной странице была полоса прокрутки, чтобы увидеть нежелательный эффект автопрокрутки:
<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
<a href="#2">2</a>
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>
Вот CSS
html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}
Может быть, вы сможете получить баллы за окончательный ответ на этот часто задаваемый вопрос?
