0

I have an AngularJS app which has a container Div that can contain many children of many widths. The widths of the children is often larger than the width of the parent. The user can scroll horizontally to access / see the children divs and the data they contain, however I wished to make life easier / cooler by adding an animation when the user clicks a specific child the container scrolls left so the child is in a zero position of the container. This is all cool however previous content that is before the clicked child is inaccessible (or should that be un accessible) after the click, I wish to allow the user to scroll back to see the original content. I think this may be a problem with my implementation, I have used css3 transform/translate rather than scrolling the left property of the parent. Would anyone know how I can allow the user to scroll back to the content that is hidden by the animation?

I have made a dummy on JS Bin and I shall add my code below to emphasise my problem. Any ideas, thoughts or solutions are greatly appreciated.

To understand my problem, please try the following:

  1. Click on the Information for 'George', then 'Ringo'.
  2. After see the animation, try to manually scroll back to see John and Paul, they have been cut off and/or are missing (yes I used the Beatles in my mockup rather than my actually app for simplicity)

Here is the Js Bin: https://jsbin.com/fikuli/edit?html,js,output

Please note that I do not wish to use jQuery.

Many, many thanks for your advice!

angular.module('cssStuff', [])

  .controller('MainCtrl', ['$scope', function ($scope) {


  }])

  .directive('moveToThis', function () {
   'use strict';
   return {
    restrict: 'A',
    link: function (scope, element) {

    var animationDistance = null;

     element.bind('click', function (ev) {
      console.log('I have been clicked');
      

      // find the distance of the 'beatle' div that was clicked and scroll / animate to the zero position of the beatle-container

      // what was clicked...
      var clickedBeatle = findUpDom(ev.target, 'data-beatle');
      
      if (clickedBeatle !== false) {
       // get position of clicked DIV to container
       if(animationDistance === null ) {
        console.log('is null');
        animationDistance = (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left);
       } else {
        console.log('already exisits');
        animationDistance = animationDistance + (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left)  || (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) ;
       }


console.log(animationDistance, element[0].children[1].children[0].scrollLeft);

       element[0].children[1].children[0].style['transition'] = '1s ease-in-out';
       element[0].children[1].children[0].style['animation-iteration-count'] = '1';
       element[0].children[1].children[0].style['animation-fill-mode'] = 'forwards';
       element[0].children[1].children[0].style['transform'] = 'translate(' + animationDistance + 'px)';
      }

     });


     var findUpDom = function (elem, attribute) {

      if (elem.getAttribute(attribute)) {
       return elem;
      } else {

       while (elem.parentNode) {
        elem = elem.parentNode;

        if (elem.getAttribute && elem.getAttribute(attribute)) {
         return elem;
         break;
        }
       }
       return false;
      }

     };

    }
   };
  });
 body {
  font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: aliceblue;
 }

 .beatle-intro {
  overflow: auto;
  border: 1px solid lightskyblue;
  display: inline-block;
  background-color: white;
  height: 500px;
  padding-left: 10px;
  padding-right: 10px;
  width: 25%;
 }

 .beatle-container {
  overflow: auto;
  border: 1px solid lightskyblue;
  display: inline-block;
  white-space: nowrap;
  width: 70%;
  background-color: white;
  height: 500px;
 }

 .beatle {
  width: 300px;
  max-width: 300px;
  display: inline-block;
  white-space: initial;
  padding-left: 10px;
 }
<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>

<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">

<div data-move-to-this>

 <div class="beatle-intro">
  <h3>Here is some info about people associated with the Beatles </h3>
  <br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
 </div>
 <div class="beatle-container">
  <div>
   <div class="beatle" data-beatle="john">
    <h3>John</h3>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="paul">
    <h3>Paul</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="george">
    <h3>George</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="ringo">
    <h3>Ringo</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="yoko">
    <h3>Yoko</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="pete">
    <h3>Pete Best</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="george-m">
    <h3>George Martin</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="brian">
    <h3>Brian Epstein</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="neil">
    <h3>Neil Aspinall</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
  </div>
 </div>
</div>
</body>
Mike Sav
  • 14,805
  • 31
  • 98
  • 143

1 Answers1

0

As long as you're using transforms, I wouldn't expect the content to be accessible any more, as it's outside the bounds of the container. Try animating the scrollLeft property of the container instead.

(Adapted from Cross browser JavaScript (not jQuery...) scroll to top animation)

function scrollTo(element, to, duration) {
  var start = element.scrollLeft,
      change = to - start,
      currentTime = 0,
      increment = 20;

  var animateScroll = function(){        
    currentTime += increment;
    var val = Math.easeInOutQuad(currentTime, start, change, duration);                        
    element.scrollLeft = val; 
    if(currentTime < duration) {
      setTimeout(animateScroll, increment);
    }
  };
  animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

angular.module('cssStuff', [])

.controller('MainCtrl', ['$scope', function ($scope) {
}])

.directive('moveToThis', function () {
  'use strict';

  var beatleContainer = document.querySelector('.beatle-container');
  var xPositionInBeatleContainer = xPositionInContainer(beatleContainer);

  function xPositionInContainer(container) {
    var containerBox = container.getBoundingClientRect();
    return function(el) {
      var elBox = el.getBoundingClientRect();
      return elBox.left - containerBox.left + container.scrollLeft;
    };
  }

  return {
    restrict: 'A',
    link: function (scope, element) {
      element.bind('click', function (ev) {
        scrollTo(beatleContainer, xPositionInBeatleContainer(ev.target), 400);
      });
    }
  };
});
body {
  font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  background-color: aliceblue;
 }

 .beatle-intro {
  overflow: auto;
  border: 1px solid lightskyblue;
  display: inline-block;
  background-color: white;
  height: 500px;
  padding-left: 10px;
  padding-right: 10px;
  width: 25%;
 }

 .beatle-container {
  overflow: auto;
  border: 1px solid lightskyblue;
  display: inline-block;
  white-space: nowrap;
  width: 70%;
  background-color: white;
  height: 500px;
 }

 .beatle {
  width: 300px;
  max-width: 300px;
  display: inline-block;
  white-space: initial;
  padding-left: 10px;
 }
<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>

<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">

<div data-move-to-this>

 <div class="beatle-intro">
  <h3>Here is some info about people associated with the Beatles </h3>
  <br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
 </div>
 <div class="beatle-container">
  <div>
   <div class="beatle" data-beatle="john">
    <h3>John</h3>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="paul">
    <h3>Paul</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="george">
    <h3>George</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="ringo">
    <h3>Ringo</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="yoko">
    <h3>Yoko</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="pete">
    <h3>Pete Best</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="george-m">
    <h3>George Martin</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
   </div>
   <div class="beatle" data-beatle="brian">
    <h3>Brian Epstein</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
   <div class="beatle" data-beatle="neil">
    <h3>Neil Aspinall</h3>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
   </div>
  </div>
 </div>
</div>
</body>
Community
  • 1
  • 1
Palpatim
  • 9,074
  • 35
  • 43
  • Thanks for that, I tried to amend the transform to the scrollLeft but I was still losing width. I must have been doing something wrong, thanks for your help! – Mike Sav Aug 03 '15 at 08:50