How to make a circular menu on Scroll using JavaScript/CSS with repeating item?-CodePudding

[There same reference. https://codepen.io/entibo/pen/JzXLdb I need it on scroll with repeating item.in a loop.]

CodePudding user response：

It's a bit buggy but it works. What I did is I copied the contents of the box two times, and when the user scrolls more than 1/3 up or 2/3 down. I send them back 1/3 the size of the box

const maxOffsetPx = 20

let $box = $(".circularScrollbox")
let $toclone = $(".vjListItem")
$toclone.clone().appendTo($('.scrollboxList'))
$toclone.clone().appendTo($('.scrollboxList'))
let $items = $(".vjListItem")
let div_size = $(".circularScrollbox")[0].scrollHeight - $(".circularScrollbox")[0].clientHeight;

function circularIndent() {
  if ($box.scrollTop() < div_size / 3)
  {
    $box[0].scrollTo({
      top: $box.scrollTop()   ((div_size * 1) / 3),
      left: 0,
      behavior: 'instant',
    });
  }
  else if ($box.scrollTop() > (2*div_size) / 3)
  {
    $box[0].scrollTo({
      top: $box.scrollTop() - ((div_size * 1) / 3),
      left: 0,
      behavior: 'instant',
    });
  }
    $items.each((i,item) => {
        let $item = $(item)
        let y = ($item.offset().top - $box.offset().top) / $box.height()
        let offset = Math.sin(y*Math.PI) * maxOffsetPx
        $item.css("transform", `translateX(${offset "px"})`)
        // or $item.css("margin-left", offset "px")
    })
}

circularIndent()
$box.scroll(circularIndent)

body {
  display: flex;
  flex-direction: column;
  height: 95vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: 'Ubuntu Mono', monospace;
}

.circularScrollbox {
  width: 300px;
  height: 10.6em;
  padding: 0 2em;
  overflow-Y: scroll;
  background: #161616;
  border: 2px solid aqua;
}

.circularScrollbox>ol {
  list-style-type: none;
  padding-left: 0;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu Mono" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class='circularScrollbox'>
    <ol class='scrollboxList'>
      <li >Item 01</li>
      <li >Item 02</li>
      <li >Item 03</li>
      <li >Item 04</li>
      <li >Item 05</li>
      <li >Item 06</li>
      <li >Item 07</li>
      <li >Item 08</li>
      <li >Item 09</li>
      <li >Item 10</li>
      <li >Item 11</li>
      <li >Item 12</li>
      <li >Item 13</li>
      <li >Item 14</li>
      <li >Item 15</li>
      <li >Item 16</li>
      <li >Item 17</li>
      <li >Item 18</li>
      <li >Item 19</li>
      <li >Item 20</li>
      <li >Item 21</li>
      <li >Item 22</li>
      <li >Item 23</li>
      <li >Item 24</li>
      <li >Item 25</li>
      <li >Item 26</li>
      <li >Item 27</li>
      <li >Item 28</li>
      <li >Item 29</li>
      <li >Item 30</li>
      <li >Item 31</li>
      <li >Item 32</li>
      <li >Item 33</li>
      <li >Item 34</li>
      <li >Item 35</li>
      <li >Item 36</li>
      <li >Item 37</li>
      <li >Item 38</li>
      <li >Item 39</li>
      <li >Item 40</li>
    </ol>
  </div>
</body>

CodePudding user response：

Here is an example:

const maxOffsetPx = 20

let $box = $(".circularScrollbox")
let $items = $(".vjListItem")

function circularIndent() {
    $items.each((i,item) => {
        let $item = $(item)
        let y = ($item.offset().top - $box.offset().top) / $box.height()
        let offset = Math.sin(y*Math.PI) * maxOffsetPx
        $item.css("transform", `translateX(${offset "px"})`)
        // or $item.css("margin-left", offset "px")
    })
}

circularIndent()


document.addEventListener( "DOMContentLoaded", function() {
  // it's a div, that holds your news
  // it holds ul with news in li elements
  var div = document.getElementById( "container" );
  div.addEventListener( "scroll", function() {
    var max_scroll = this.scrollHeight - this.clientHeight;
    var current_scroll = this.scrollTop;
    var bottom = 100;
    if ( current_scroll   bottom >= max_scroll ) {
      var ul = document.getElementsByTagName( "ul" )[ 0 ];
      var current = parseInt( ul.dataset.current, 10 );
      var li = document.getElementsByTagName( "li" )[ current ];
      var new_li = li.cloneNode( true );
      ul.appendChild( new_li );
      ul.dataset.current = current   1;
    }
  } );
} );

body {
  display: flex;
  flex-direction: column;
  height: 95vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: 'Ubuntu Mono', monospace;
}

.circularScrollbox {
  width: 300px;
  height: 10.6em;
  padding: 0 2em;
  overflow-Y: scroll;
  background: #161616;
  border: 2px solid aqua;
}

.circularScrollbox>ol {
  list-style-type: none;
  padding-left: 0;
}

ul{
    list-style: none
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu Mono" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="container" class='circularScrollbox block'>
    <ul class='scrollboxList' data-current="0">
      <li >Item 01</li>
      <li >Item 02</li>
      <li >Item 03</li>
      <li >Item 04</li>
      <li >Item 05</li>
      <li >Item 06</li>
      <li >Item 07</li>
      <li >Item 08</li>
      <li >Item 09</li>
      <li >Item 10</li>
      <li >Item 11</li>
      <li >Item 12</li>
      <li >Item 13</li>
      <li >Item 14</li>
      <li >Item 15</li>
      <li >Item 16</li>
      <li >Item 17</li>
      <li >Item 18</li>
      <li >Item 19</li>
      <li >Item 20</li>
      <li >Item 21</li>
      <li >Item 22</li>
      <li >Item 23</li>
      <li >Item 24</li>
      <li >Item 25</li>
      <li >Item 26</li>
      <li >Item 27</li>
      <li >Item 28</li>
      <li >Item 29</li>
      <li >Item 30</li>
      <li >Item 31</li>
      <li >Item 32</li>
      <li >Item 33</li>
      <li >Item 34</li>
      <li >Item 35</li>
      <li >Item 36</li>
      <li >Item 37</li>
      <li >Item 38</li>
      <li >Item 39</li>
      <li >Item 40</li>
      <li >Item 41</li>
      <li >Item 42</li>
      <li >Item 43</li>
      <li >Item 45</li>

    </ul>
  </div>
</body>