Запретить горизонтальную прокрутку DIV (прилипать), но разрешить вертикальную прокрутку - PullRequest
Новая
       25

Запретить горизонтальную прокрутку DIV (прилипать), но разрешить вертикальную прокрутку

0 голосов
/ 03 октября 2018

Можно ли предотвратить прокрутку элемента по горизонтали, но разрешить прокрутку по вертикали вместе с остальным содержимым страницы?Это немного сложно описать, поэтому позвольте мне показать пример:

HTML: 

<nav>Side Nav</nav>
<header>Header</header>
<main> 
   <h1>Main Content</h1>
   <div class="wideContainer">
      Some wide and tall container
   </div>
</main>

CSS: 

nav {
  position: fixed;
  width: 150px;
  height: 100vh;
}
header {
  height: 100px;
  padding-left: 150px;
}
main {
  padding-left: 150px;
}
.wideContainer {
  width: 2000px;
  height: 1000px;
}

https://jsfiddle.net/hg2zmu1o/7/

Как видите, левый столбец исправлен.Заголовок прокручивается при вертикальной прокрутке.Это правильно.Но когда в области main есть какой-то широкий контент, он делает горизонтальную прокрутку страницы (что нормально).Однако при горизонтальной прокрутке заголовок также перемещается за боковой навигационный столбец.

Как сделать так, чтобы он оставался горизонтально?

Я пытался использовать position:sticky, но безуспешно. 

position: sticky;
left: 150px;

Имейте в виду, я не хочу делатьposition:fixed на весь заголовок, потому что тогда он не будет прокручиваться вертикально с остальной частью страницы.

jsfiddle иллюстрирует проблему.

EDIT:

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

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

Если кто-нибудь знает, как этого добиться с помощью чистого CSS, дайте мне знать.В противном случае я могу пойти с этим тем временем.

1 Ответ

0 голосов
/ 03 октября 2018

Просто добавьте overflow-x к вашему CSS.

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
}
nav {
  position: fixed;
  width: 150px;
  background-color: gray;
  height: 100vh;
}
header {
  height: 100px;
  background-color: silver;
  padding-left: 150px;
}
main {
  padding-left: 150px;
}
.wideContainer {
  width: 100%;
  height: 1000px;
  background-color: turquoise;
}
<nav>Side Nav</nav>
<header>Header</header>
<main> 
 <h1>Main Content</h1>
 <div class="wideContainer">
   Some wide and tall container
 </div>
</main>

Это то, что вы искали?

Я также сделал это и это .

Надеюсь, это поможет!

...