如何隱藏水平欄，並使左右按鈕水平滾動？
[英]How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?
問題描述
如何隱藏水平欄，並使左右按鈕水平滾動？
此外，還應該為手機啟用滾動（啟用觸摸）。 我已經創建了正在使用的標記的jsfiddle 。 非常感謝。
<div class="ui grid container r-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment r-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="r-content">
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
</div>
</div>
<div class="rprod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
1 個解決方案
解決方案1
2 已采納 2015-09-09 16:12:02
由於並非所有瀏覽器都允許您設置滾動條的樣式，因此我使用了overflow-y:hidden; 在父級上隱藏滾動條。 您可以根據需要設置按鈕的樣式。 我只是把它們放在底部。
演示： http ： //jsfiddle.net/hopkins_matt/muL9mrL1/1/
CSS：
/* featured column */
.ui.segment.i-feat-col {
overflow-y:hidden;
}
.i-feat-prod-row {
margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
color: #6CAF2B;
}
.i-feat-col {
height: 250px !important;
}
.i-prod-card {
width: 170px;
height: 170px;
position: relative;
display: inline-block;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 0.5rem 1em;
margin-top: auto;
padding: 1em 1em;
border-radius: 4px;
border: 1px solid rgba(34, 36, 38, 0.15);
top: 6px;
}
div.scroll {
height: calc(100% + 10px);
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.i-content {
white-space: nowrap;
}
.i-feat-header {
text-transform: capitalize;
font-size: 12px;
white-space: initial !important;
text-align: left;
line-height: 17px;
letter-spacing: normal;
padding-right: 11px;
padding-left: 11px;
clear: right;
}
.i-feat-header-price {
color: #F44336;
font-weight: 500;
font-size: 15px;
}
.i-feat-img {
display: block;
max-width: 140px;
width: auto;
height: auto;
}
.dimmable {
position: absolute;
}
JS：
$(function () {
$('.i-prod-card .image').dimmer({
on: 'hover'
});
});
function scrollHoz(dir) {
if (dir == 'L') {
$('.scroll').animate({
scrollLeft: "-=" + 250 + "px"
});
} else if (dir == 'R') {
$('.scroll').animate({
scrollLeft: "+=" + 250 + "px"
});
}
}
HTML：
<div class="ui grid container i-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment i-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="i-content">
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
<iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>
如何在左側制作垂直滾動條，水平滾動條應從左側底部開始
[英]how to make vertical scroll bar at left side and horizontal scroll bar should start from left side at bottom
如何使浮動標題列水平滾動並防止它們向左對齊？
[英]How can I make floating header columns to scroll horizontally and prevent them to align left?
如何在 jQuery 中創建一個計數器變量，當用戶單擊左右箭頭按鈕時更改圖像？
[英]How can I make a counter variable in jQuery that changes the images when the user clicks on the right and and left arrow buttons?
當滾動到達容器末尾時，如何使左/右按鈕消失？
[英]How can I make left/right button disappear when the scroll gets to the end of the container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.