2016-07-21 3 views
0

Как прокручивать строку без прокрутки изображения в области прокрутки? Я сейчас делаю это на html, любые предложения, пожалуйста? Мне еще предстоит изучить jQuery, так или иначе, это можно сделать только с помощью кодирования html? enter image description hereКак заставить полосу прокрутки прокручивать строки только без прокрутки изображения

это мое текущее кодирование:

@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

Трудно сказать, просто просмотрев изображение, поделитесь кодом как HTML, так и CSS. – Manjuboyz

+0

линия - это отдельный элемент, или он поставляется с изображением ... путаница. предоставить код или объяснить – ihemant360

+0

@Manjuboyz Я просто поделился им. – CHIGGAJX

ответ

0

Если изображения не зависит от линии, то вместо того, чтобы использовать установки: абсолютное, вы можете изменить, что

.image{  

Position:fixed; 
} 

, чтобы он входил в контейнер.

+0

Он все еще не работает. Изображение по-прежнему перемещается, пока вертикальная линия не перемещается. – CHIGGAJX

+0

Не уверен, что его больше спросят, не могли бы вы поделиться своим кодом в скрипке, так как нам трудно проверить код, причина прокрутки никогда не появляется !! – Manjuboyz

+0

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

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