Запретить прокрутку родительской страницы из ссылок привязки к цели в дочернем элементе - PullRequest
Новая
       0

Запретить прокрутку родительской страницы из ссылок привязки к цели в дочернем элементе

0 голосов
/ 07 февраля 2020

У меня есть section на моей веб-странице, которая содержит несколько материалов, поэтому я решил присвоить ей фиксированную высоту и полосу прокрутки с overflow-y: scroll. Чтобы упростить навигацию, я добавил панель навигации поверх section с anchor links для каждого содержимого в разделе. Моя проблема заключается в том, что всякий раз, когда вы нажимаете на ссылку привязки, родительская страница прокручивается вместе с разделом, ведь навигационная панель исчезает, поэтому вам нужно прокрутить родительскую страницу вверх, чтобы снова найти панель навигации. Вот быстрый пример того, что я имею в виду: как вы видите, секция body прокручивается и к цели, когда я хочу, чтобы прокручивалась только секция scrollview. Как мне исправить это поведение?

Примечание: часть с плавной прокруткой на данный момент не очень важна, я включил ее только для того, чтобы показать свои окончательные намерения. 

body{height: 100em}
#scrollviewsection
{
  background-color: white;
}
#navbar {
  overflow: hidden;
  background-color: #333;
  position: relative;
  top: 0px;
}

/* tabbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
#scrollview
{ 
  height: 40em;
  width: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth !important;
  }
#part1 {height:10em;background-color: #cc6699}
#part2 {height:10em;background-color: #e68a00}
#part3 {height:10em;background-color: #00ffff}
#part4 {height:10em;background-color: #5cd65c}
<body>
<div style="height:10em"></div>
<section id="scrollviewsection">
        <div id="navbar">
          <a href="#part1">part1</a>
          <a href="#part2">part2</a>
          <a href="#part3">part3</a>
          <a href="#part4">part4</a>
        </div> 
   <div id="scrollview">
     <div id="part1">part1</div>
     <div style="height:10em"></div>
     <div id="part2">part2</div>
     <div style="height:10em"></div>
     <div id="part3">part3</div>
     <div style="height:10em"></div>
     <div id="part4">part4</div>
   </div>
</section>
</body>

РЕДАКТИРОВАТЬ: Я попытался использовать jquery плавную прокрутку, потому что я вспомнил, что я могу контролировать, какой элемент анимировать, теперь у меня есть целая куча новых ошибок: например, когда я нажимаю на часть 2 из части 1, она прокручивается мимо цели. 

$('#navbar a').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('#scrollview').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});
body {
  height: 100em
}

#scrollviewsection {
  background-color: white;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  position: relative;
  top: 0px;
}


/* tabbar links */

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

#scrollview {
  height: 40em;
  width: auto;
  overflow-y: scroll;
  overflow-x: hidden;
}

#part1 {
  height: 10em;
  background-color: #cc6699
}

#part2 {
  height: 10em;
  background-color: #e68a00
}

#part3 {
  height: 10em;
  background-color: #00ffff
}

#part4 {
  height: 10em;
  background-color: #5cd65c
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<body>
  <div style="height:10em"></div>
  <section id="scrollviewsection">
    <div id="navbar">
      <a href="#part1">part1</a>
      <a href="#part2">part2</a>
      <a href="#part3">part3</a>
      <a href="#part4">part4</a>
    </div>
    <div id="scrollview">
      <div id="part1">part1</div>
      <div style="height:10em"></div>
      <div id="part2">part2</div>
      <div style="height:10em"></div>
      <div id="part3">part3</div>
      <div style="height:10em"></div>
      <div id="part4">part4</div>
    </div>
  </section>
</body>

1 Ответ

0 голосов
/ 07 февраля 2020

Я думаю, это то, что вы ищете:

Отредактировано для учета прокрутки тела

По сути, я установил переполнение <body> на скрыт, а затем назначил навигационной панели фиксированную высоту, а прокручивающий div - верхнее поле, соответствующее высоте навигационной панели, чтобы они располагались рядом друг с другом по вертикали.

Установка высоты прокручиваемого div (#scrollview) до 40em, вероятно, не то, что вы хотите в вашей окончательной версии, но я оставляю это вам. Именно поэтому «part4» не отображается при прокрутке внизу во фрагменте ниже. 

body{
  height: 100%;
  overflow-y: scroll; /* or auto */
}
#scrollviewsection
{
  background-color: white;
  height: 100%;
}
#navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  width: 100%;
  top: 0px;
  height: 3em;
}

/* tabbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
#scrollview
{ 
  height: 40em;
  width: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth !important;
  display: block;
  margin-top: 3em;
  }
#part1 {height:10em;background-color: #cc6699;}
#part2 {height:10em;background-color: #e68a00}
#part3 {height:10em;background-color: #00ffff}
#part4 {height:10em;background-color: #5cd65c}
<body>
<!-- <div style="height:10em"></div>-->
<section id="scrollviewsection">
        <div id="navbar">
          <a href="#part1">part1</a>
          <a href="#part2">part2</a>
          <a href="#part3">part3</a>
          <a href="#part4">part4</a>
        </div> 
   <div id="scrollview">
     <div id="part1">part1</div>
     <div style="height:10em"></div>
     <div id="part2">part2</div>
     <div style="height:10em"></div>
     <div id="part3">part3</div>
     <div style="height:10em"></div>
     <div id="part4">part4</div>
     <div style="height:10em"></div>
   </div>
</section>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...