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

Question

У меня есть текст, который не подходит в теге div, .textBox. Поэтому я хочу создать функцию, которая в случае зависания родительского div начнет прокручивать текст слева направо. Таким образом, пользователь может прочитать полный контент. И когда он не зависает, он исчезает до положения по умолчанию.

Я не хочу использовать шатер. Я хочу сохранить структуру как есть и использовать CSS или JavaScript для ее решения.

Вот пример без функции:

.textBox { 
 
    width: 200px; 
 
    height: 30px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
    line-height: 30px; 
 
    padding: 5px; 
 
}

<div class="textBox">Some Content here and some more here</div>

Любая идея, как это сделать?

Answer 1

Смотреть это чистое решение CSS, добавлен тег диапазона чтобы сделать это возможным.

Ключевое понятие: перемещение тега span влево со значением ширины окна - ширины диапазона. В другом слове, которое позволяет прокручивать до конца текста при наведении.

jsfiddle

.textBox { 
 
    width: 200px; 
 
    height: 30px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
    line-height: 30px; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 
.textBox span { 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    transform: translateX(0); 
 
    transition: 1s; 
 
} 
 
.textBox:hover span { 
 
    transform: translateX(calc(200px - 100%)); 
 
}

<div class="textBox"><span>The quick brown fox jumps over the lazy dog</span></div>

Answer 2

EDIT: Я вынул CSS, потому что он не реагировал. Следующий код javascript делает прокрутку div, когда мышь над ним.

Обратите внимание: Я добавил id="myDiv" в div в html.

var myDiv = document.getElementById("myDiv"); 
myDiv.addEventListener("mouseover", function(){ 
    myDiv.style = "overflow-y:scroll" 
}); 
myDiv.addEventListener("mouseout", function(){ 
    myDiv.style = "overflow-y:hidden" 
}); 

Я также продемонстрировал его в этом fiddle.

Answer 3

использование JQuery scrollLeft метод

var interval_val = 2; 

setInterval(function(){ 
    $(".scroll_contant").scrollLeft(interval_val); 
    interval_val++; 
}, 100); 

смотрите по этой ссылке: https://plnkr.co/edit/NtYpo6l77yet9SE0wpms?p=preview

и демонстрационный пример с OnMouseOver и onmouseout посещения событий: https://myswaasth.com/#/swaasth/procedures

Answer 4

увидеть это Jquery

$(document).ready(function() 
 
     { 
 
      // for stuff that scrolls left on hover 
 
      $(".scroll_on_hover").mouseover(function() 
 
      { 
 
       $(this).removeClass("ellipsis"); 
 
       var maxscroll =$(".boardindex_themefitted_board_main_description").width(); 
 
       var speed = maxscroll * 15; 
 
       $(this).animate({ 
 
        scrollLeft: speed 
 
       }, 10000, "linear");//set timer for slower one 
 
      }); 
 

 
      $(".scroll_on_hover").mouseout(function() 
 
      { 
 
       $(this).stop(); 
 
       $(this).addClass("ellipsis"); 
 
       $(this).animate({ 
 
        scrollLeft: 0 
 
       }, 'fast'); 
 
      }); 
 
     });

.boardindex_themefitted_board_main_description.scroll_on_hover:hover { cursor: none;} 
 
     .ellipsis {text-overflow: ellipsis;} 
 
     .hide {display: none;} 
 
     /* Set a fontsize that will look the same in all browsers. */ 
 
     body {background: #fff;background-repeat: repeat; font: 78%/130% "Arial", "Helvetica", sans-serif; margin: 0 auto; } 
 
     /* use dark grey for the text, leaving #000 for headers etc */ 
 
     body, td, th, tr {color: #444;} 
 
     /* BoardIndex.template.php Theme Fitted format ------ */ 
 
     .boardindex_themefitted_category_holder_aligner {   text-align: center;   margin: 0 auto;  } 
 
     .boardindex_themefitted_board_main {   background: #fff;   border: 1px solid #373737;   border-radius: 8px;   height: 44px;   margin: 0 auto;   width: 20%;  } 
 
     .boardindex_themefitted_board_main_content {   padding: 10px;   overflow: hidden;  } 
 
     .boardindex_themefitted_board_main_description {   white-space: nowrap;   overflow: hidden;   font-weight: bold;   font-size: 10px;   font-family: Arial;   color: #373737;   line-height: 12px;  } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="boardindex_themefitted_board_holder"> 
 
     <div class="boardindex_themefitted_board_main"> 
 
      <div class="boardindex_themefitted_board_main_content"> 
 
       <div id="boardindex_themefitted_board_main_content_chunk1" class="show"> 
 
        <div class="boardindex_themefitted_board_main_subject floatleft ellipsis"> 
 
         <a href="http://default-smf.visualpulse.net/index.php?board=1.0" name="b1">General Discussion</a> 
 
        </div> 
 
        <div class="clear"></div> 
 
        <div class="boardindex_themefitted_board_main_description scroll_on_hover ellipsis" id="input" > 
 
         Feel free to talk about anything and everything in this board.Feel free to talk about anything and everything in this board.Feel free to talk about anything and everything in this board. 
 
        </div> 
 
        <div class="clear"></div> 
 
       </div> 
 

 
      </div> 
 
     </div> 
 
     
 
     <div class="clear"></div> 
 
    </div>