Адаптация рулетки под ширину

#javascript #html #css

function doubleRoll(winner) {
  var rollPositions = {
    0: -10178,
    1: -10240,
    2: -10366,
    3: -10492,
    4: -10618,
    5: -10744,
    6: -10870,
    7: -9676,
    8: -9802,
    9: -9928,
    10: -10054,
    11: -10304,
    12: -10430,
    13: -10556,
    14: -10682,
    15: -10808,
    16: -10934,
    17: -9738,
    18: -9864,
    19: -9990,
    20: -10116
  }
  var roll = rollPositions[winner];
  $('.roulette_table').css('transition', '10s cubic-bezier(.25,0,.5,1)');
  $(".roulette_table").css({
    "margin-left": "" + roll + "px",
  });
  setTimeout(function() {
    $('.roulette_table').css('transition', 'none');
    $(".roulette_table").css({
      "margin-left": "" + (roll + 9238.5) + "px",
    });
  }, 10500);
}
#round_draw_pointer_mid {
    position: absolute;
    top: 0;
    margin: auto;
    width: 5px;
    height: 100%;
    background: #000;
}
.roulette_option {
    text-align: center;
    color: #fff;
    display: inline-block;
    width: 60px;
    height: 80px;
        margin-left: -1.6px;
    line-height: 25px;
    vertical-align: middle;
    border-top: 2px solid rgba(0,0,0,.5);
}
   
.roulette_table {
    width: 15000px;
    height: 150px;
    overflow-y: hidden;
    position: absolute;
}
#round_draw_pointer {
    height: 100%;
    width: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99;
}
.roulette_option span {
    font-size: 18px;
    font-weight: bold;
    background: rgba(255,255,255,.08);
    display: block;
}
.roulette_table_holder {
    width: 100%; /* если указать 810px, будет работать как надо! */
    height: 80px;
    overflow: hidden;
    position: relative;
}


  

    

  
  

    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
    
0
    
1
    
11
    
2
    
12
    
3
    
13
    
4
    
14
    
5
    
15
    
6
    
16
    
7
    
17
    
8
    
18
    
9
    
19
    
10
    
20
  












Такс, значит задача стоит следующая.. есть рулетка в ней есть 20 разных позиций.
Но так получилось, что делал эту рулетку под ширину 810px, а надо чтобы она растягивалась
на весь экран те width = 100% Если поменять в стилях в селекторе .roulette_table_holder
указать параметр width = 100%;, то рулетка будет работать как надо, но если указано
100% (как и надо), то она не адаптивна, и выпадает совсем другое число.
    

Ответы

Ответ 1

В итоге переписал весь код. И сделал так:

function doubleRoll(winner) {
    if ($(".roulette_table").length > 0) {
        var number = winner;
        if (number == 0) {
            numberCalc = 0;
        } else if (number > 10) {
            numberCalc = 2 * (number - 10);
        } else {
            numberCalc = 2 * (number) - 1;
        }
        var numberMargin = 60 * numberCalc;
        var randPos = Math.floor(Math.random() * 52) + 6
        var centerMargin = -21 * 60 + 60 * 7 + $("#page_content").width() / 2;
        var startMargin = centerMargin - numberMargin - randPos - 5458;
        $(".roulette_table").css('left', startMargin + 'px').css('transition', '10s
cubic-bezier(.25,0,.5,1)');

    }
    setTimeout(function() {
        $('.roulette_table').css('transition', 'none');
        $(".roulette_table").css({
            "left": ""+ (startMargin + 5040) +"px",
        });
    }, 10500);
}