отключить вертикальную прокрутку на div/img

У меня есть заголовок на моем сайте с большим изображением (ширина 1000 пикселей). Это изображение центрировано (по горизонтали). Если пользователь приходит на этот сайт с окном браузера, размер которого меньше 1000 пикселей в ширину, он может прокручиваться по горизонтали. Это то, что я хотел бы предотвратить, поскольку внешние части изображения не важны, а остальная часть страницы такая же широкая, как и окно браузера пользователей.отключить вертикальную прокрутку на div/img

Например: окна пользователей браузера А в ширине 600px, что я хотел бы случиться:

Первый 200px изображения невидим, следующий 600px виден и последний 200px изображения снова невидимы.

<html> 
<body> 
    <div id="outer" style="width:100%;overflow-x:hidden;"> 
     <div id="inner" style="display: table;margin: 0 auto;width:1300px"> 
      <img src="image.jpg" alt="image" width="1300px"> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-09-12 Nils Ziehn

Я пришел ищу «отключить вертикальную прокрутку» и вы говорите * "Если пользователь заходит на этот сайт с окном браузера, который тоньше, чем 1000px в ширине, он может прокручивать по горизонтали. Это то, что я хотел предотвращать"*. Поэтому я отредактировал заголовок для «отключить горизонтальный» вместо «отключить вертикаль». Но затем я попробовал переполнение-y и переполнение-x на div, с которым я работал, и получил неожиданные результаты, поэтому, возможно, я чего-то не хватает ...? Поэтому я изменил его. * Я должен знать лучше, чем пытаться вмешиваться в вопросы CSS. : -) * – HostileFork

Для этого вам потребуется использовать CSS.

div { 
    overflow-x: hidden; 
}

источник

2013-09-12 17:15:10 user1

Можете ли вы также предложить мне, как центрировать изображение, которое исчезает с левой стороны, когда ширина браузера становится слишком малой? Правая сторона работает отлично! –

Должен работать сам по себе, если вы просто установите его как фоновое изображение, центрированное. Вам нужно поместить его в div, на который применяется 100% ширина, и высота, указанная для расширения div, чтобы увидеть что-либо.

источник

2013-09-12 17:15:59

Да, дисплей имеет фоновое изображение. –

Хотя это работает на изображении, я предпочитаю ответ user1, который также работает на любом div. Но за ваш ответ! –

Попробуйте position: fixed; Это фиксирует положение и не допускает никакого скроллинга

источник

2016-08-31 13:38:25

Это нехорошее решение, с фиксированной позицией, вы не сможете получить div из вашего экрана без js. –

Вам нужно сделать изображение фона из него, содержащей DIV.

<html> 
<body> 
    <div id="outer" 
     style="width:100%; overflow-x:hidden;"> 
     <div id="inner" 
      style="margin: 0 auto; 
        width:100%, 
        background: url('image.jpg') 50% 0; 
        max-width: 1300px;"> 
     </div> 
    </div> 
</body> 
</html>

источник

2017-08-24 12:56:32

отключить вертикальную прокрутку на div/img

ответ

Смежные вопросы