Question

出于合规性原因，我需要使用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>

Answer 1

我找不到能够保持一致速度的纯CSS方式，但是通过一点数学和小的javascript，您可以使用可变高度的项目实现固定速度。下面的关键因素是/ 500，以每秒像素为单位。无论项目的长度如何，下面的代码都会以每秒500 px的速度滚动。

高度可以容纳您的设计。
这将根据您的请求流畅地循环。
滚动速度是您确定的，与长度无关。

javascript / css冗长易读。

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

HTML

import * as React from 'react';
import { View, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';

const FirstRoute = () => (
  <View style={[styles.container, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
  <View style={[styles.container, { backgroundColor: '#673ab7' }]} />
);

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'First' },
      { key: 'second', title: 'Second' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });

  _renderTabBar = props => {
    const inputRange = props.navigationState.routes.map((x, i) => i);

    return (
      <View style={styles.tabBar}>
        {props.navigationState.routes.map((route, i) => {
          const color = Animated.color(
            Animated.round(
              Animated.interpolate(props.position, {
                inputRange,
                outputRange: inputRange.map(inputIndex =>
                  inputIndex === i ? 255 : 0
                ),
              })
            ),
            0,
            0
          );

          return (
            <ImageBackground
            source={{uri: "https://cdn.pixabay.com/photo/2015/07/27/19/47/turtle-863336__340.jpg"}}
            style={{flex:1}}
        >
            <TouchableOpacity
              style={styles.tabItem}
              onPress={() => this.setState({ index: i })}>
              <Animated.Text style={{ color }}>{route.title}</Animated.Text>
            </TouchableOpacity>
            </ImageBackground>
          );
        })}
      </View>
    );
  };

  _renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this._renderScene}
        renderTabBar={this._renderTabBar}
        onIndexChange={this._handleIndexChange}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabBar: {
    flexDirection: 'row',
    paddingTop: 24,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    padding: 16,
  },
});

CSS

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

JS

* { 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%) }
}

固定滚动速度时，带有CSS的100％高垂直字幕

1 个答案:

HTML

CSS

JS