时间戳

首页 > 解决方案 > 100% 高垂直选取框与 CSS 以固定滚动速度

css - 100% 高垂直选取框与 CSS 以固定滚动速度

问题描述

出于合规性原因，我需要用等效的 CSS 替换垂直滚动条。替换需要是 100% 高的选取框，以固定的速度垂直滚动。

这个例子做了我需要的三个例外：https ://codepen.io/strongpom/pen/qmooZe

我尝试使用上面链接的代码，但找到了一种方法来满足以下三个要求：

(1) 我需要它是 100% 高，并且文本从顶部滚动到底部。

(2) 我无法指定滑块 div 的长度，因为它将由（变量）内容确定。这意味着我不能设置绝对滚动位置，除了 div 的顶部应该从视口的底部开始，并继续滚动直到该 div 的底部到达视口的顶部。

和

(3) 滚动速度不能固定为例如15秒，因为如果内容多，则滚动太快，而如果内容少，则滚动太慢。我需要能够指定一个固定的滚动速度，与长度无关。

.container {
    width: 20em;
    height: 10em;
    margin: 2em auto;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

.slider {
    top: 1em;
    position: relative;
    box-sizing: border-box;
    animation: slider 15s linear infinite;
    list-style-type: none;
    text-align: center;
}

.slider:hover {
    animation-play-state: paused;
}

@keyframes slider {
    0%   { top:   10em }
    100% { top: -14em }
}

.blur .slider {
  	margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
}

.blur:before, .blur::before,
.blur:after,  .blur::after {
    left: 0;
    z-index: 1;
    content: '';
    position: absolute;
    width: 100%; 
    height: 2em;
    background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}

.blur:after, .blur::after {
    bottom: 0;
    transform: rotate(180deg);
}

.blur:before, .blur::before {
    top: 0;
}

p {
  font-family: helvetica, arial, sans serif;
}
<div class="container blur">
    <ul class="slider">
      <li><p> Hello, it's me</p></li>
      <li><p> I was wondering if after all these years you'd like to meet</p></li>
      <li><p>To go over everything</p></li>
      <li><p> They say that time's supposed to heal ya</p></li>
      <li><p> But I ain't done much healing</p></li>
    </ul>
</div>

标签： cssmarquee

解决方案

我找不到一种纯粹的 CSS 方式来获得一致的速度，但是通过一点数学和小 javascript，您可以通过可变高度项目实现固定速度。下面的关键因素是 / 500，以每秒像素为单位。无论项目的长度如何，下面的代码将以每秒约 500 像素的速度滚动。

  1. 高度可以适应您的设计。
  2. 这将根据您的要求顺利循环。
  3. 无论长度如何，滚动速度都是您确定的。

为了便于阅读，javascript/css 很冗长。

CodePen - 如果仍然可用，否则代码如下。

HTML

<ul class=slider>
  <li>Item</li>
  ...
</ul>

CSS

* { padding: 0; margin: 0; box-sizing: border-box; }
body { overflow: hidden; height: 100%; }

.slider {
    position: absolute;
    list-style-type: none;
    text-align: center;
    animation: slider linear infinite;
}

.slider li { line-height: 50px; width: 100vw; } 

@keyframes slider {
    0%   { transform: translateY(100vh) }
    100% { transform: translateY(-100%) }
}

JS

window.onload = function() {
var lineHeight = document.querySelector(".slider li").clientHeight;
var viewHeight = window.innerHeight;
var slider = document.querySelector(".slider");
var time = (slider.offsetHeight * 2.0 + viewHeight * 2) / 500.0; 

slider.style.animationDuration = time + "s";
}

推荐阅读