2016-07-21 9 views
0

Wie scrolle ich nur die Zeile, ohne das Bild im Bildlauffeld zu scrollen? Ich mache es gerade auf HTML, irgendwelche Vorschläge bitte? Ich muss jQuery noch lernen, gibt es trotzdem, dass dies mit nur HTML-Codierung getan werden kann? enter image description hereWie kann ich die Bildlaufleiste die Zeilen nur scrollen, ohne das Bild zu scrollen

das ist meine aktuelle Codierung:

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
/* bhoechie tab */ 
 
div.bhoechie-tab-container{ 
 
    z-index: 10; 
 
    background-color: #ffffff; 
 
    padding: 0 !important; 
 
    border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border:1px solid #ddd; 
 
    margin-top: 20px; 
 
    margin-left: 50px; 
 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
 
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
 
    background-clip: padding-box; 
 
    opacity: 0.97; 
 
    filter: alpha(opacity=97); 
 
} 
 
div.bhoechie-tab-menu{ 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    padding-bottom: 0; 
 
} 
 
div.bhoechie-tab-menu div.list-group{ 
 
    margin-bottom: 0; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a{ 
 
    margin-bottom: 0; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a .glyphicon, 
 
div.bhoechie-tab-menu div.list-group>a .fa { 
 
    color: #5A55A3; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a:first-child{ 
 
    border-top-right-radius: 0; 
 
    -moz-border-top-right-radius: 0; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a:last-child{ 
 
    border-bottom-right-radius: 0; 
 
    -moz-border-bottom-right-radius: 0; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a.active, 
 
div.bhoechie-tab-menu div.list-group>a.active .glyphicon, 
 
div.bhoechie-tab-menu div.list-group>a.active .fa{ 
 
    background-color: #5A55A3; 
 
    background-image: #5A55A3; 
 
    color: #ffffff; 
 
} 
 
div.bhoechie-tab-menu div.list-group>a.active:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 50%; 
 
    margin-top: -13px; 
 
    border-left: 0; 
 
    border-bottom: 13px solid transparent; 
 
    border-top: 13px solid transparent; 
 
    border-left: 10px solid #5A55A3; 
 
} 
 

 
div.bhoechie-tab-content{ 
 
    background-color: #ffffff; 
 
    /* border: 1px solid #eeeeee; */ 
 
    padding-left: 20px; 
 
    padding-top: 10px; 
 
} 
 

 
div.bhoechie-tab div.bhoechie-tab-content:not(.active){ 
 
    display: none; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
<link href="../Documents/Unnamed Site 2/Untitled-4.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<div style="height:380px;width:380px;overflow:auto;"> 
 
<img src="scroll/src/denso.jpg" alt="Sample picture for scroll box"> 
 
<hr COLOR="BLACK" WIDTH="60%" > 
 
<div class="vertical_line"></div> 
 

 
</div> 
 

 
<style> 
 

 

 
.vertical_line{position: relative; top: 0; left:0; right:0;} 
 
.vertical_line{position: absolute; top:10px; left:190px; right: 190px; height:360px; width:3px;background:#000; } 
 

 
</style> 
 

 

 

 
<body> 
 
</body> 
 
</html>

+0

Schwer zu sagen, nur durch Bild sehen, teilen Sie den Code von HTML und CSS. – Manjuboyz

+0

Zeile ist separates Element oder es kommt mit Bild ... Verwirrung. Code zur Verfügung stellen oder erklären – ihemant360

+0

@Manjuboyz Ich habe es gerade geteilt. – CHIGGAJX

Antwort

0

Wenn Bilder auf der Linie nicht abhängig sind, dann anstelle von Position: absolute, du die

.image{  

Position:fixed; 
} 
ändern

so dass es in den Behälter passt.

+0

Es funktioniert immer noch nicht. Das Bild bewegt sich weiterhin, während sich die vertikale Linie nicht bewegt. – CHIGGAJX

+0

Bin nicht sicher, es ist mehr zu fragen, können Sie Ihren Code in Geige teilen, da es für uns schwer ist, den Code zu überprüfen, Grund Scroll erscheint nie !! – Manjuboyz

+0

https://jsfiddle.net/chiggajx/6ugs8osg/1/ – CHIGGAJX