Мобильная версияЯ проектирую веб -сайт, где как основной контент, так и прокрутка боковой панели вместе с использованием одной прокрутки. Поскольку боковая панель короче, я использовал позицию: Sticky с отрицательным верхом , чтобы сохранить его дно видимым и предотвратить показ любого пустого пространства под ним. Это работает при прокрутке вниз. Однако при прокрутке обратно, боковая панель не прокручивается до тех пор, пока не будет достигнуто липкое положение, вызывая задержку в его восходящем движении. Боковая панель должна всегда оставаться выровненной и прокручивать естественным образом, независимо от положения прокрутки. (Для получения более подробной информации перейдите на x HomePage и посмотрите, как прокручивается главная и правая боковая панель, и см. Мои прикрепленные кодовые изображения) < /p>
контекст < /strong>:
Я строю x.com (Twitter) клон с двумя областями: основной раздел и As Shotor. Поскольку они разделяют одну прокрутку, сначала прокручивается боковая панель, раскрывая незадведенное пространство под ним. Я хочу повторить, как x.com обрабатывает это: как только боковая панель достигает своего максимального свитка, он ведет себя так, как будто на месте. Но когда пользователь прокручивается обратно, боковая панель плавно прокручивается вверх с основным содержанием - в отличие от позиции: липкий , которая застряла, пока не будет достигнуто определенное положение прокрутки. (См. Прикрепленные изображения для справки.) < /P>
минимальный воспроизводимый пример: < /strong> < /p>
Перейти к нижнему < /li>
Попробуйте подняться < /li>
Наблюдать за тем, как в этом случае. Достигнуто, < /li>
Повторите то же самое на домашней странице x.com, чтобы увидеть, как она работает < /li>
< /ol>
for (i = 0; i < 5; i++) {
document.querySelector(".right").insertAdjacentHTML("afterbegin", `${5-i}`)
}
for (i = 0; i < 15; i++) {
document.querySelector(".main").insertAdjacentHTML("afterbegin", `${15-i}`)
}
const small = document.querySelector(".right")
const smallbot = small.getBoundingClientRect()
small.style.top = `${window.innerHeight - smallbot.height}px`;< /code>
Код: Выделить всё
.box {
height: 200px;
width: 300px;
border: 2px solid red;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: larger;
}
.cont {
display: flex;
}
.right {
position: sticky;
}< /code>
Предыдущие подходы, которые не сработали [/b]:
Я попробовал несколько подходов, включая динамическое применение позиции: Absolute , когда Scrolling Up Up. Тем не менее, это либо позиционирует боковую панель относительно тела (смещено слева), либо, если установлено значение левого , оно остается фиксированным в одном месте - в отличие от x.com, где боковая панель, по -видимому, прилипает к нижней части и прокручивается плавно с помощью основного содержания, когда я пробовал, я пробовал, я пробовал. Top Значение, чтобы отточить боковую панель, которая работает, но она смещает весь DIV в верхнюю часть экрана, неправильно позиционируя ее. Боковая панель перестает прокрутка после полной прокрутки - появляясь, прикрепленная к тому, чтобы избежать просмотра пустого пространства - и при прокрутке обратно, она плавно прокручивает вверх с помощью основного содержания - применяясь снизу, чтобы избежать отображения пустого пространства выше (см. Домашнюю страницу X)
Изображение 1 (когда пользователь имеет склонило к нижней):
Изображение 1 (когда пользователь имеет склонистые. />
Image 2 (user is going up but side bar is stuck due to sticky) ;
@vatsal1010 . 21h
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eius,
amet odit alias
accusantium ea, natus architecto quibusdam molestias consequuntur expedita recusandae officiis
perferendis accusamus? Quae animi omnis explicabo iure!
`)
document.querySelector(".yo").insertAdjacentHTML("beforeend", `
Trending in india
BIG BREAKING
433K posts
`)
}
document.querySelector(".yo").insertAdjacentHTML("beforeend", `Show more`)
const side = document.querySelector(".cont")
const sidebot = side.getBoundingClientRect()
side.style.top = `${window.innerHeight - sidebot.height}px`;< /code>
Код: Выделить всё
.box {
height: fit-content;
align-self: flex-start;
}
.size {
height: 62px;
width: 243px;
gap: 20px;
font-weight: 600;
align-items: center;
font-size: 20px;
}< /code>
Document
[img]svg/x.svg[/img]
[img]svg/ome.svg[/img]
Home
[img]svg/search.svg[/img]
Explore
[img]svg/bell.svg[/img]
Notification
[img]svg/message.svg[/img]
Message
[img]svg/grok.svg[/img]
Grok
[img]svg/profiile.svg[/img]
Profile
[img]svg/more.svg[/img]
More
Post
V
Vatsal Sharma
@vatsal101011456765
For you
Following
V
What's happening?
Post
Show 1,120 posts
Subscribe to premium
Subscribe to unlock new features and if eligible, receive a share of revenue.
Subscribe
What's happening
[img]rand.jpg[/img]
FC barcelona vs Inter milano
starts at 7:00pm
```Подробнее здесь: https://stackoverflow.com/questions/796 ... ce-in-html
