2015-04-04 5 views
4

Мой случай полностью описанной в заголовке: при смене вкладок, страница прокручивается вверх, и я понятия не имею, как предотвратить это ... Pure Вкладки CSS - Предотвращение прокрутки страницы сверху на изменение вкладки

.ubdtabs { 
 
    
 
    float: none; 
 
    list-style: none; 
 
    position: relative; 
 
    text-align: left; 
 
    padding-left: 8px; 
 
} 
 
.ubdtabs li { 
 
    float: left; 
 
    display: block; 
 
} 
 
.ubdtabs input[type="radio"] { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 
.ubdtabs label { 
 
    display: block; 
 
    padding: 14px 21px; 
 

 
    
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
    background: -webkit-linear-gradient(top, #1B6889 0%,#009DE0 100%); 
 
    cursor: pointer; 
 
    position: relative; 
 
    
 
/* -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out;*/ 
 
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); 
 
    border-radius: 5px 5px 0 0; 
 
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); 
 
} 
 
.ubdtabs label:hover { 
 
    background: #1B6889; 
 
} 
 
.ubdtabs .ubdtab-content { 
 
    z-index: 2; 
 
    display: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    
 
    line-height: 25px; 
 
    padding: 25px; 
 
    position: absolute; 
 
    
 
    left: 0; 
 
    background: #b3d4fc; 
 
} 
 
.ubdtabs [id^="ubdtab"]:checked + label { 
 
    
 
    
 
    background: #b3d4fc; 
 
} 
 
.ubdtabs [id^="ubdtab"]:checked ~ [id^="ubdtab-content"] { 
 
    display: block; 
 
}
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<ul class="ubdtabs"> 
 
    <li> 
 
     <input type="radio" name="ubdtabs" id="ubdtab1" checked /> 
 
     <label for="ubdtab1">first</label> 
 
     <div id="ubdtab-content1" class="ubdtab-content"> 
 
     <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
     </div> 
 
    </li> 
 
    
 
    <li> 
 
     <input type="radio" name="ubdtabs" id="ubdtab2" /> 
 
     <label for="ubdtab2">second</label> 
 
     <div id="ubdtab-content2" class="ubdtab-content"> 
 
\t \t <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> \t 
 
     </div> 
 
    </li> 
 
</ul> 
 

 
<br style="clear: both;" />

Или Codepen: http://codepen.io/anon/pen/KwLPBQ

Для воспроизведения:
1. Прокрутите страницу немного вниз
2. Нажмите кнопку "второй" вкладка
3. Page СБН рулоны наверх

Любые идеи?

+2

Я не могу объяснить, почему его происходит, но удалив верхний атрибут из входного .ubdtabs [тип = «Радио»] появляется для устранения проблемы –

+1

@BenBroadley display: none; на переключателях также решает проблему. – tkay

+2

@tkay Кажется, что окно браузера фокусируется на флажках при их изменении; установка верхнего атрибута на положительный 9999px, прокручивает окно до нижней части, а не сверху. –

ответ

4

Удалите верхние & стили слева и добавьте display:none; к радиовходу. Если полосы прокрутки включены, если вы фокусируетесь на входе вне окна просмотра, он прокручивается к этому элементу.

Если вы хотите сосредоточиться элемент, который находится за пределами окна просмотра используйте этот код яваскрипта

var donotScroll = function(element) { 
    var x = window.scrollX, y = window.scrollY; 
    element.focus(); 
    window.scrollTo(x, y); 
} 
+1

Это решает мою проблему. Спасибо, ткай! – Dmitry

Смежные вопросы