Разрешить только телу прокручивать x пикселей css

Допустим, мой веб-сайт имеет длину 2000 пикселей, а высота моего окна просмотра - 1000 пикселей, вот так:

enter image description here

По умолчанию это позволяет сайту прокручивать 1000 пикселей. Чтобы прокрутить это расстояние, полоса прокрутки должна перемещаться сверху вниз.

Однако что, если я хочу, чтобы полоса прокрутки могла прокручивать только 500 пикселей, тем самым скрывая нижние 500 пикселей веб-сайта, но я не хочу изменять высоту своего веб-сайта.

Я попытался сделать это, используя приведенный ниже код css:

body{
    height: 1500px;
    max-height: 1500px;
    position: absolute;
}

Но это не сработало, потому что тело не имеет родительского элемента, чтобы добавить вокруг него полосы прокрутки.

Есть ли другой способ сделать это?

Почему вы хотите, чтобы такая часть страницы не была видна? Кроме того, у body есть родительский элемент: html.

TylerH 10.08.2018 16:43

@TylerH Это сработало, спасибо, я установил элемент html на переполнение прокрутки. Это для плагина javascript, который я пробую, я хочу привязать расстояние прокрутки к событию javascript.

YAHsaves 10.08.2018 16:45

Рад слышать, что это сработало; пожалуйста, добавьте свое решение в качестве ответа и поставьте ему галочку, чтобы другие знали, что решило его за вас!

TylerH 10.08.2018 16:53

Не уверен, что это было решено или нет, если нет, то почему бы просто не поместить его в div с максимальной высотой 1500 пикселей (позволяет телу прокручиваться до 1500 пикселей) с overflow:hidden. Я также не понимаю, зачем вам это делать. это серьезная проблема с удобством использования, которая может привести к высокому показателю отказов.

Pete 10.08.2018 17:06
1
4
132
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Пример

<body>
<div class="main-container">
website content
</div>
</body>

Стиль:

.main-container {
height: 1500px;
max-height: 1500px;
position:relative;
}

Я пробовал относительное положение, но это тоже не сработало. Я хочу сделать это на теле, потому что я разрабатываю плагин javascript, который должен работать на как можно большем количестве веб-сайтов, поэтому я не смогу заранее обернуть элементы веб-сайтов в родительский div

YAHsaves 10.08.2018 16:42
Ответ принят как подходящий

После некоторого обсуждения в комментариях я понял, что элемент html является родителем элемента body. Таким образом, используя код css в моем ответе и устанавливая переполнение html для прокрутки, все работает по желанию.

Другие вопросы по теме