Как прокручивать только часть div

ProgramBox

Как прокручивать только часть div

Post author:admin
Запись опубликована:22 марта, 2023
Post category:Вопросы по программированию

#css

Вопрос:

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

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

 .container{
  height: 400px;
  width: 250px;
  border: 1px solid red;
  overflow-y: scroll;
}

.title{
  color: red;
}

.scroll-text{
  position: relative;
  
}

.scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  background-color: #979797;
}

 <div class="container scrollbar">
  <div class="title">
    Title: This tough guy shouldn't scroll
  </div>
  <div class="scroll-text">
    This is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. This is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for.
  </div>
</div>

Как я могу динамически устанавливать высоту прокрутки div, чтобы она всегда помещалась в пределах родительского элемента, но все равно прокручивалась?

Ответ №1:

Если я правильно вас понимаю, это поможет вам.

 .container{
  height: 400px;
  width: 250px;
  border: 1px solid red;
  overflow-y: scroll;
}

.title{
  color: red;
  position: sticky;
  top:0;
  background-color: white;
}

.scrollbar{
  
}

.scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  background-color: #979797;
}

 <div class="container scrollbar">
  <div class="title">
    Title: This tough guy shouldn't scroll
  </div>
  <div class="scrollbar">
    This is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. This is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for. his is content purely designed to cause an overflow. No content in here has any purpose. Well, that is, besides it's purpose of being lengthy content. Is that a purpose? I guess so, but not one worthy of readying this arduous sentances for.
  </div>
</div>

1. Да! Вы точно поняли, что я имею в виду. Сейчас я работаю над двумя вещами: 1. Заголовок должен быть исправлен только в div, а не в окне. 2. Заполнение для прокрутки div должно вычисляться динамически.

2. Обновление: выяснил, что # 2 невозможно только через css, но все еще работает над # 1

3. Я отредактировал свой ответ сейчас. Я надеюсь, что это решит обе ваши проблемы 🙂

4. Приятно! Да, позиция sticky оказалась подходящим вариантом. Спасибо за вашу помощь @Osman Durdag

Ответ №2:

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

 .title {
    position: fixed;
}

или попробуйте добавить

 overflow: hidden;

во внешнем div.

если вы пытаетесь заставить его перейти к заголовку, попробуйте

 .title {
    z-index: 2;
}

я не совсем понимаю, чего вы хотите, например, объясните, как ваши пять..