При наведении мыши не удается прокрутить данные переполнения - PullRequest
Новая
       0

При наведении мыши не удается прокрутить данные переполнения

0 голосов
/ 20 марта 2020

Мне нужно остановить преобразование, как только оно достигнет конца, значит li 22. но оно снова будет первым. 

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111;
      }

      .textBox {
        width: 80%;

        white-space: nowrap;
        overflow:hidden !important;

      }
      
      .scroll{
        display:flex;
      }
     
     
        .textBox {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
     
      .textBox:hover .scroll {
                     position: absolute;
        
            -moz-animation: scroll-left 2s linear;
            -webkit-animation: scroll-left 2s linear;
            animation: scroll-left 2s linear;

      }
      
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    <div class="textBox">
<ul class="scroll">
  <li><a class="active" href="#home">0Home</a></li>
  <li><a href="#news">1News</a></li>
  <li><a href="#contact">2Contact</a></li>
  <li><a href="#about">3About</a></li>
  <li><a href="#news">4News</a></li>
  <li><a href="#contact">5Contact</a></li>
  <li><a href="#about">6About</a></li>
  <li><a href="#news">7News</a></li>
  <li><a href="#contact">8Contact</a></li>
  <li><a href="#about">9About</a></li>
  <li><a href="#news">10News</a></li>
  <li><a href="#contact">11Contact</a></li>
  <li><a href="#about">12About</a></li>
  <li><a href="#news">13News</a></li>
  <li><a href="#contact">14Contact</a></li>
  <li><a href="#about">15About</a></li>
  <li><a href="#news">16News</a></li>
  <li><a href="#contact">17Contact</a></li>
  <li><a href="#about">18About</a></li>
  <li><a href="#news">19News</a></li>
  <li><a href="#contact">20Contact</a></li>
  <li><a href="#about">22About</a></li>
</ul>
</div>

Я хочу прокрутить последний li до конца моего меню. Я пытался прокрутить курсор мыши, но не смог прокрутить данные переполнения. Мне нужно прокрутить до последнего li вправо при наведении мыши. но не в состоянии прокрутить. Не могли бы вы помочь мне решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 20 марта 2020

попробуйте, установив ширину 100%, как показано в следующем коде 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.textBox {
  width: 100%;
  white-space: nowrap;
  overflow: hidden !important;
}

.scroll {
  display: flex;
}

.textBox .scroll {
  transition: 1s;
}

.textBox:hover .scroll {
  transform: translateX(calc(90% - 100%));
}
    </style>
</head>
<body>
    <div class="textBox">
        <ul class="scroll">
          <li><a class="active" href="#home">1Home</a></li>
          <li><a href="#news">2News</a></li>
          <li><a href="#contact">3Contact</a></li>
          <li><a href="#about">4About</a></li>
          <li><a href="#news">5News</a></li>
          <li><a href="#contact">6Contact</a></li>
          <li><a href="#about">7About</a></li>
          <li><a href="#news">8News</a></li>
          <li><a href="#contact">9Contact</a></li>
          <li><a href="#about">10About</a></li>
          <li><a href="#news">11News</a></li>
          <li><a href="#contact">12Contact</a></li>
          <li><a href="#about">13About</a></li>
          <li><a href="#news">14News</a></li>
          <li><a href="#contact">15Contact</a></li>
          <li><a href="#about">16About</a></li>
          <li><a href="#news">17News</a></li>
          <li><a href="#contact">18Contact</a></li>
          <li><a href="#about">19About</a></li>
          <li><a href="#news">20News</a></li>
          <li><a href="#contact">21Contact</a></li>
          <li><a href="#about">22end About</a></li>
        </ul>
      </div>
</body>
</html>
0 голосов
/ 20 марта 2020

В случае, если вы все еще ищете его и Источник: Scrolling-Text 

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111;
      }

      .textBox {
        width: 80%;
        white-space: nowrap;
        overflow:hidden !important;

      }
      
      .scroll{
        display:flex;
      }
     
     
        .textBox {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
     
      .textBox:hover .scroll {
              position: absolute;        
            -moz-animation: scroll-left 5s linear;
            -webkit-animation: scroll-left 5s linear;
            animation: scroll-left 5s linear;
           transform:translateX(-95%);

      }      
      
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    <div class="textBox">
<ul class="scroll">
  <li><a class="active" href="#home">0Home</a></li>
  <li><a href="#news">1News</a></li>
  <li><a href="#contact">2Contact</a></li>
  <li><a href="#about">3About</a></li>
  <li><a href="#news">4News</a></li>
  <li><a href="#contact">5Contact</a></li>
  <li><a href="#about">6About</a></li>
  <li><a href="#news">7News</a></li>
  <li><a href="#contact">8Contact</a></li>
  <li><a href="#about">9About</a></li>
  <li><a href="#news">10News</a></li>
  <li><a href="#contact">11Contact</a></li>
  <li><a href="#about">12About</a></li>
  <li><a href="#news">13News</a></li>
  <li><a href="#contact">14Contact</a></li>
  <li><a href="#about">15About</a></li>
  <li><a href="#news">16News</a></li>
  <li><a href="#contact">17Contact</a></li>
  <li><a href="#about">18About</a></li>
  <li><a href="#news">19News</a></li>
  <li><a href="#contact">20Contact</a></li>
  <li><a href="#about">22About</a></li>
</ul>
</div>
0 голосов
/ 20 марта 2020

Я думаю, вы хотите вот так: -

Сейчас вы используете calc(80% - 100%) это означает, что вы прокручиваете только -20% 

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover {
        background-color: #111;
    }
    
    .textBox {
        width: 80%;
        white-space: nowrap;
        overflow: hidden !important;
    }
    
    .scroll {
        display: flex;
    }
    
    .textBox .scroll {
        transition: 1s;
    }
    
    .textBox:hover .scroll {
        transform: translateX(-90%); // update it//
    }
 <div class="textBox">
        <ul class="scroll">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...