滾動固定位置時發出的問題

-2

我正在嘗試創建一個類似this的旋轉木馬滑塊，類似於我們在android中所使用的滑塊。滾動固定位置時發出的問題

我處於創建階段，我遇到的問題是我使用的是position: fixed;，但我只希望它水平固定，因爲它需要滾動。

我如何才能將position: fixed;應用於水平滾動？

貝婁，是我目前使用的代碼：

var val = 0; 
$("button").click(function() { 
    for (var i = 0; i < 9; i++) { 
    $('.MySlide:nth-child(' + (i + 1) + ')').removeClass('MySlide' + (((val + i) % 9) + 1) + ''); 
    $('.MySlide:nth-child(' + (i + 1) + ')').addClass('MySlide' + (((val + i + 1) % 9) + 1) + ''); 
    } 
    val = (val + 1) % 9; 
});

.long-div { 
    height: 300px; 
} 
.MySlides-wrap { 
    border: 1px; 
    border-style: solid; 
    height: 350px; 
} 
.MySlide { 
    float: left; 
    width: 300px; 
    height: 300px; 
    position: fixed; 
    transition: transform 500ms; 
    left: -75px; 
    border: 1px; 
    border-style: solid; 
    background-color: blue; 
} 
.MySlide1 { 
    z-index: 1; 
    transform: translate(0px, 0px) scale(0.6, 0.6); 
} 
.MySlide2 { 
    z-index: 2; 
    transform: translate(150px, 0px) scale(0.7, 0.7); 
} 
.MySlide3 { 
    z-index: 3; 
    transform: translate(300px, 0px) scale(0.8, 0.8); 
} 
.MySlide4 { 
    z-index: 4; 
    transform: translate(450px, 0px) scale(0.9, .9); 
} 
.MySlide5 { 
    z-index: 5; 
    transform: translate(600px, 0px) scale(1, 1); 
} 
.MySlide6 { 
    z-index: 4; 
    transform: translate(750px, 0px) scale(0.9, .9); 
} 
.MySlide7 { 
    z-index: 3; 
    transform: translate(900px, 0px) scale(0.8, 0.8); 
} 
.MySlide8 { 
    z-index: 2; 
    transform: translate(1050px, 0px) scale(0.7, 0.7); 
} 
.MySlide9 { 
    z-index: 1; 
    transform: translate(1200px, 0px) scale(0.6, 0.6); 
} 
.MySlideFutured { 
    z-index: 9; 
    transform: scale(1, 1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>teste slider</title> 
    </head> 
    <body> 
    <div class="long-div"></div> 
    <div class="MySlides-wrap"> 
     <div class="card MySlide MySlide1"></div> 
     <div class="card MySlide MySlide2"></div> 
     <div class="card MySlide MySlide3"></div> 
     <div class="card MySlide MySlide4"></div> 
     <div class="card MySlide MySlide5"></div> 
     <div class="card MySlide MySlide6"></div> 
     <div class="card MySlide MySlide7"></div> 
     <div class="card MySlide MySlide8"></div> 
     <div class="card MySlide MySlide9"></div> 
    </div> 
    <button>Next</button> 
    </body> 
</html>

來源

2015-05-29 Robson O S

我找不到任何我想要的東西，再加上它對我來說是一個很好的鍛鍊:) –

@ humble.rumble你所說的一切都讓人望而生畏！如果我使用錯誤的方法，建議改善而不是批評我的！ –

有這個問題的許多解決方案，但是固定的定位是用來粘在上一個位置的東西屏幕，而不是網頁中的位置。我建議創建可滾動容器並使用jquery控制滾動偏移量。

工作示例（在Chrome和Firefox至少，沒有測試過其他人）：

https://jsfiddle.net/7duatxmv/

原諒內嵌樣式的示範：

<div id="slideContainer" style="position:relative; overflow:hidden; white-space: nowrap;"> 
    <div class="slide" style="display:inline-block;"> 
     Content 1 
    </div> 
    <div class="slide selected" style="display:inline-block;"> 
     Content 2 (scroll to me by default) 
    </div> 
    <div class="slide" style="display:inline-block;"> 
     Content 3 
    </div> 
</div>

在這種情況下，「 slideContainer「的寬度等於單個幻燈片的寬度，並且您可以利用瀏覽器的本地滾動來切換幻燈片。

jQuery可以通過.scrollLeft（）和.offset（）來控制滾動。

來源

2015-05-30 06:07:23 user2867288

滾動固定位置時發出的問題

回答

相關問題