Auto Scrolling with CSS

Auto scrolling with CSS

1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)

2.) You can remove the buttons by overwriting the current CSS and adjust the visibility or display tag to render them away or (placeholding) invisible.

In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.

Edit:

This might be something for you to work with animating the slider:

#container {
  height: 200px;
  width: 800px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 25px auto;
}

#box {
  background: orange;
  height: 180px;
  width: 400px;
  margin: 10px -400px;
  -webkit-animation-name: move;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: right;
  -webkit-animation-timing-function: linear;
}

#box:hover {
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes move {
  0% {
    margin-left: -400px;
  }
  100% {
    margin-left: 800px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main2.css" type="text/css" />
</head>

<body>
  <div id="container">
    <div id="box">as</div>
  </div>
</body>

</html>

Automatic scrolling for CSS overflow: scroll

Snippet changed:

var targetElm = document.querySelector('.boxChild'),  // reference to scroll target

    button = document.querySelector('button');        // button that triggers the scroll

  

// bind "click" event to a button 

button.addEventListener('click', function(){

   targetElm.scrollIntoView()

})

.box {

  width: 80%;

  border: 2px dashed;

  height: 180px;

  overflow: auto;

  scroll-behavior: smooth; /* <-- for smooth scroll */

}

.boxChild {

  margin: 600px 0 300px;

  width: 40px;

  height: 40px;

  background: green;

}

<button>Scroll to element</button>

<div class='box'>

  <div class='boxChild'></div>

</div>

Auto scrolling text inside html table

You can do it with @karthik's comment with a table, it is just easier with divs in my opinion.

.tech-slideshow {

  height: 200px;

  max-width: 800px;

  margin: 0 auto;

  position: relative;

  overflow: hidden;

  transform: translate3d(0, 0, 0);

}

.tech-slideshow>td {

  height: 200px;

  width: 256px;

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  transform: translate3d(0, 0, 0);

}

.tech-slideshow .mover-1 {

  animation: moveSlideshow 5s linear infinite;

}

@keyframes moveSlideshow {

  100% {

    transform: translateX(-66.6666%);

  }

}

<table>

  <tr class="tech-slideshow">

    <td class="mover-1">

      scrolling text scrolling text

    </td>

  </tr>

</table>

Auto scroll a chatbox with css

You need to do the scrolling after appending the new message in the DOM

socket.on('chatMessage', function (data) {
    var messages = $('#chatbox-listMessages'),
        messagesNode = messages[0];
    messages.append(userMessage(data.username, data.message));
    messagesNode.scrollTop = messagesNode.scrollHeight;
});

Css scroll bar auto scrolling with added content

Set the Element.scrollTop property of the scrolling div to be the position of the new element in the page + the new element's offset in its parent.

For example in the addListItem() function add the following line:

document.getElementById('scroll').scrollTop = message.offsetHeight + message.offsetTop;

Working fiddle: https://jsfiddle.net/rvnj6mc3/

how to make window auto scrolling using css?

Something like this:

$(document).ready(function() {

  $('.scroll').on('mouseenter', function() {

    $("body").animate({

      scrollTop: $(this).offset().top

    }, 500);

  })

})

.red {

  background-color: #f00;

}

.green {

  background-color: #0f0;

}

.red,

.green {

  margin-bottom: 10px;

  height: 300px;

  position: relative;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red scroll"></div>

<div class="green scroll"></div>

How make auto scroll down when new element is added?

Get the new element :

var element = document.getElementById(newElement);

and the first for instant scroll and second for smooth scroll:

element.scrollIntoView();

element.scrollIntoView({behavior: "smooth"});

Here is a useful webpage
: https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

Auto Scrolling with CSS