0

Подскажите можно ли сделать плавное проявление прокрутки при наведении на блок? Свойство transition не помогает.

Сделал вот такой код:

.box {
  display: inline-block;
  width: 100%;
  max-height: 100px;
  overflow-y: hidden;
}

.box:hover {
  overflow-y: auto;
  transition: overflow-y 0.125s ease-in-out;
}
0

1 ответ 1

4

Наведи на текст

* {
  margin: 0;
}
body{
 padding-top:30px;
   }

.item {
  width: 500px;
  max-height: 300px;
  margin: auto;
  position: relative;
}

.item:after {
  content: "";
  display: block;
  width: 16px;
  height: 300px;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  transition: .5s;
}

.item:hover:after {
  background: transparent;
  visibility: hidden;
}

.item1 {
  width: 500px;
  height: 300px;
  overflow-Y: auto;
  overflow-x: hidden;
  margin: auto;
}
<div class="item">
  <div class="item1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo, ut pariatur autem deserunt ratione aliquam veniam eos ex itaque laborum dicta, quam animi, excepturi obcaecati provident culpa dignissimos eum harum consequatur possimus? In facilis,
    recusandae cum voluptate at beatae eaque? Consequatur inventore totam quia accusamus vel tempore nulla iusto blanditiis fuga adipisci quaerat deserunt facilis, quam, rerum expedita voluptatum aut eaque modi est distinctio harum iure ipsa animi. Pariatur
    quam eum molestias reprehenderit deleniti autem, est consequatur in explicabo fugit tempore architecto cupiditate numquam nesciunt alias quos repellat maiores corporis maxime repudiandae. Molestiae iusto est nam, velit atque consectetur accusantium
    illo dolor vero, eos veritatis quibusdam eaque sapiente nostrum nemo ut reiciendis! Atque aspernatur, facere culpa impedit ad aut autem. Recusandae repellendus ipsum doloremque ratione, dolorum ex sint porro magnam aperiam ea! Incidunt modi ipsam
    vel sunt labore ullam blanditiis, ad, ab accusamus mollitia tempore nisi ratione nemo omnis laudantium illo, totam possimus repellendus! Saepe quis quasi, voluptatem corrupti vero officia impedit totam animi ipsum? Id minus voluptas rem error modi
    quasi omnis animi magni odio aspernatur, est cum tempora nemo, magnam, similique sapiente non asperiores praesentium corporis sit atque. Cum recusandae, quo distinctio ad, expedita neque necessitatibus quos temporibus porro animi, dolorem libero nulla
    vitae veniam! Ea assumenda fuga ipsam dicta est, voluptatem illo fugiat? Sit dolor atque dicta ex quos. Cum, quos modi! Autem nobis laudantium consequuntur veniam nihil! Impedit ipsam aut a hic, error repellat, perspiciatis rem consectetur totam recusandae
    laudantium, similique vitae earum vel corporis fugiat repudiandae qui nisi. Repellendus saepe itaque voluptatem eligendi aliquam optio? Deserunt harum ad aut velit doloremque neque mollitia. Perspiciatis sequi voluptate adipisci asperiores quasi,
    necessitatibus non officiis nam vitae repellat deserunt illo, velit et sapiente numquam omnis! Quos atque dolore error itaque explicabo, pariatur nesciunt quasi minus accusamus, facilis commodi odit consequuntur culpa, maxime vitae repudiandae eum
    ratione reprehenderit aliquid delectus. Sequi at fugit ex libero dolores error, aliquid maiores blanditiis sed minima, voluptas necessitatibus, exercitationem tempore tenetur. Pariatur nisi quasi id rem quos iusto aut aliquam quia eaque, quam dolore
    recusandae sint quod labore fuga tempore aperiam, magni corporis? Modi laborum commodi asperiores sit vitae fugiat, error a quas nulla blanditiis repellat beatae nostrum inventore cumque quasi consequuntur laboriosam, autem omnis tempore nam animi!
    Perspiciatis in architecto voluptates aliquid ex, maiores unde quisquam totam ad quibusdam facere! Ipsa repellendus labore delectus maiores aspernatur dolorum accusantium voluptate eaque facilis quo?
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.